Log in

View Full Version : text-decoration onmouseover not working in FF...yes, there's a doctype


pbink
08-07-2008, 04:45 PM
Hey folks...been stuck on this one for way too long...this small snippet of code should work in Firefox, yet it does not...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<body>
<input type="submit" name="registry" value="WTF" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" />
</body>
</html>
TheJoshMan
08-07-2008, 05:24 PM
This isn't CSS, well... Let me correct myself. This is a javascript command declaring CSS variables. I think you would probably find more help for this in the "Javascript" section seeing as how the part you are having trouble with is Javascript
TheJoshMan
08-07-2008, 07:41 PM
Check your DOCTYPE tag... Once I removed the DOCTYPE from the equation it worked fine in FF
boogyman
08-07-2008, 08:03 PM
There is a restriction on where you can use text-decoration and I am almost positive that input fields fall into that restriction.

PS The official abbreviation for Firefox is Fx :p
jscheuer1
08-07-2008, 08:04 PM
If you have any valid URL DOCTYPE it will not work. This means that FF thinks (and it may well be right) that according to standards, the text-decoration style property doesn't apply to input elements (at least when their type is submit, and by extension, probably at least button as well, perhaps all input elements).
TheJoshMan
08-07-2008, 11:17 PM
Ah, I wasn't sure if it was ALL doctypes that would break the code, or just specifically the one they were using. Thanks for clarifying.
rangana
08-08-2008, 12:20 AM
Try to display that input element as block level element. See if adding the highlighted helps:


<input type="submit" name="registry" value="WTF" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" style="display:block;" />
TheJoshMan
08-08-2008, 12:25 AM
Yep, I just tested that one rangana... it works in Fx LOL
jscheuer1
08-08-2008, 01:24 AM
That's interesting, but making it display:block; will change how it lays out. If that's an issue, making it display:inline-block; appears to make it work as well, without changing how it lays out.

Also, I did a little more testing. If it was a text input, there was no problem in the first place. If it was a button, instead of a submit button though, it was still the same problem.
rangana
08-08-2008, 01:31 AM
Actually, if you just set a display property without even setting a value will make it work for firefox just like IE behaves:


<input type="submit" name="registry" value="WTF" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" style="display:;" />

Though it might fail CSS validation. (haven't tested)
jscheuer1
08-08-2008, 02:04 AM
Actually, if you just set a display property without even setting a value will make it work for firefox just like IE behaves:


<input type="submit" name="registry" value="WTF" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" style="display:;" />

Though it might fail CSS validation. (haven't tested)

That doesn't work in FF 3 if there is a valid URL DOCTYPE. And yes, it is invalid css.