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

**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:

Code:

<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:

Code:

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

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions