Can you underline a button in Firefox without quirks mode?

[DiMono]

Consider this code:

<input type="button" value="u" style="text-decoration: underline;" />

With a complete doctype definition, Firefox will not render the underline, but IE will. With an incomplete doctype definition, Firefox renders the page in quirks mode, and the underline is rendered. I want the underline to render, but I don't want the page to load in quirks mode. Is there a way to make this happen?

[drhowarddrfine]

What you are doing with that markup is actually trying to underline a value or property of the element, somethingi CSS doesn't do. The fact that it happens at all is just a matter of luck. You might look into 'button' since it's more flexible but I couldn't get 'underline' to work there either.

Most browsers are different on what they allow for styling in forms. You can frequently style the borders the text is in, and the colors or fonts, but little else.

[DiMono]

Actually, someone on another forum found a solution. For some reason (we honestly don't know why), if you apply any of the following (or some variants of them) to a button:

position: absolute;
display: block;
float: left;

the underline shows up. So my solution was to reverse the order of my buttons, float them all to the right, and now the underline shows up. I've updated this page with one of them, and you can see it works.

Any idea why this works?

[drhowarddrfine]

There are many things that will work if you apply them but that doesn't mean they're standard or reliable. And this may be just one of those things.