pmj7 — Thu, 12 Dec 2002 03:33:02 +0000

She's up!

Details of the change have been listed in the SNW review thread. But for those in this thread, changes include a revised 'search & translation controls' area, with graphic 'go' button and hover effects.

Peter

Suzanne — Thu, 12 Dec 2002 01:43:03 +0000

Looking forward to seeing it in action.

pmj7 — Thu, 12 Dec 2002 01:18:11 +0000

Thank you once again, Suzanne!

Using your suggestions and some extra code/css I have something that works on Explorer, Netscape and Opera under Windows. Netscape 4.x will show a plain page as it has always done at http://www.supernaturalwoman.com. I will put up the revised pages within the next few days.

Peter

Suzanne — Wed, 11 Dec 2002 23:28:10 +0000

For the record, to do something to one specific element, you would set the id for that element. Such as...

input#thisone:hover {}

You would hide this style from N4.x, preventing any "bombing".

Hiding styles from various browsers: http://www.ericmeyeroncss.com/bonus/trick-hide.html

It would work in IE5+, and Netscape7, but possibly not Opera (I don't have a PC to test at the moment).

pmj7 — Wed, 11 Dec 2002 20:32:33 +0000

To clear things up for people just joining, I'm trying to make a border appear around a linked image (even one within a form). This can be done with a true border, or with a gif that has a 1-pixel transparent border and changing the background color.

Thanks for the input. Suzanne, your code places a border around all form controls. In a standard Search ________ Go setup, this includes the text entry control as well. Also, having it bomb on Netscape 4.x sounds like a bit of a drawback, so I haven't looked further into it.

Here is my current solution. It uses the onmouseover to change the style of the element. Granted it only works in Explorer, as expected since it's based on code generated by Frontpage. I'm searching the web on how to change the style of an element universally.

This requires some JavaScript:

function rollIn(el)
{
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(ie4)
{
el.initstyle=el.style.cssText;
el.style.cssText=el.myrolloverstyle;
}
}

function rollOut(el)
{
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(ie4)
el.style.cssText=el.initstyle
}

To place a border on linked images outside a form is a bit easier:

.flagborder a:link img {
border:1px #2175bc solid;
}
.flagborder a:hover img {
border:1px yellow solid;
}

Peter

Suzanne — Wed, 11 Dec 2002 04:12:59 +0000

Actually... not the case.

input:hover works fine in IE6, N7, et cetera. Pseudo classes are not limited to any tag.

I rarely use classes, instead, I use IDs, like so:

div#someid input:hover {
border: 3px solid black;
}

And it works just dandy!

I'd show you, but I'm sure you can build it yourselves and play around. I have a sample in a secure form that I can't show you, but if you want, I'll pull it out for you.

It doesn't work in Opera (naturally on the mac -- I can't test the PC version for readiness).

Anyway, it is more cutting-edge, yes.

nike_guy_man — Wed, 11 Dec 2002 04:00:54 +0000

Hooray I was right about something
I suggest JS with Images as well... if you can make the images small enough, which I always have trouble with
Good luck

Busy — Wed, 11 Dec 2002 03:58:15 +0000

only 'a' tags (links) are hovered,
you might be better off using javascript to change the image, this way it's more user friendly and wil either give a result or wont, where as CSS can give varied results

nike_guy_man — Wed, 11 Dec 2002 03:48:09 +0000

Quote: Originally posted by Renegade
can u give a visual example? i odn't get what your saying,

Is it really that tough?

Quote:
Renegade Demystified:
Can you give me a visual example? I do not understand that which you are saying. (A link to show me what is wrong)

I'm a bit confused about this subject though...
I'm not the CSS master but I've tried this:

P.menu {
background: #000000;
color: #ffffff;
}
P.menu:HOVER {
background: #ffffff;
color: #000000;
}

'
However, when hovered won't change...
Am I completely wrong or does only tags allow HOVER??

Suzanne — Wed, 11 Dec 2002 02:45:05 +0000

Renegade, can you type whole words, love, I don't get what you're saying!

What I'm saying is that in the CSS, you use input:hover { declarations go here } to create the effect you need.

HOWEVER, IE6's aqua interface (and IE5/mac) usurp the author's ability to control those elements, so the border effects happen INSIDE the chrome of the rounded corners and glow when active. Annoying, that. It shouldn't work the same way with an image (type="button" or type="image"), but I haven't tried it.