Form graphic button hover effect?

To set form elements, you would use the same hover pseudo class.

Not to harp, but if you check the CSS-Discuss archive, and try css-discuss.org, you'll find this sort of information and more.

Why are you using a 1px transparent border? To light up the border on hover?

Are you sure Opera and Netscape bungled it? IE doesn't have the best support, and still allows horrible mistakes to just float on through, so check your CSS code.

Border on form elements is known to crash N4.x, so hide that from it.

can u give a visual example? i odn't get what your saying,

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.

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:

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

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

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.

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

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).

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

Looking forward to seeing it in action.

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.

http://www.supernaturalwoman.com

Peter