[Solved?] Doctype prevents underline in button input

I'm trying to underline the u in an input field. This works:

...

This doesn't:

...

The only difference is the doctype. Is there a way I can make it work under xhtml strict?

Is that really all of your code? *sigh*

Anyway it doesn't work with any doctype I've tried.

Yes, it's really all of the code.

HTML 4.01 - works

XHTML 1 - doesn't work

Note: I've discovered that the problem exists in Firefox, but both work in IE 6+

Styling form controls is a far from exacting science with few actual specifications for browser manufacturers to follow, it's not the only control than can or cant have one of it's aspects styled in one browser but not in another.

Your html 4.01 doctype is incomplete and is rendering in quirks mode. That's why I couldn't get it to work, I was using a proper doctype.

Whoops, Triumph screwed up. I'm sorry. I accidentally hit the edit button on your post instead of quote and I seem to have overwritten your reply. :blushing:

I was trying to say what's in the next post.

I was just messing around with it and for some reason this doesn't work:
input {text-decoration:underline;}
but this does:
input {text-decoration:underline;float:left;}
and
input{text-decoration:underline;display:block;}
and
input{text-decoration:underline;position:absolute;}

Don't ask me... :shrug: I can't explain this one.

Well, it seems my solution, then, is to reverse the order of my style buttons and float them all to the right. I can confirm that it works on the page on which I'm trying it. The relevant portion of my css looks like this:

#bbbuttons {
        text-align: right;
        padding-bottom: 6px;
}
#bbbuttons input {
        font-weight: normal;
        display: block;
        float: right;
        margin-left: 3px;
}
#bbbuttons #b {
        width: 26px;
        font-weight:bold;
}
#bbbuttons #i {
        width: 24px;
        font-style:italic;
}
#bbbuttons #u {
        width: 28px;
        text-decoration: underline;
}
#bbbuttons #s {
        width: 26px;
        text-decoration: line-through;
}

The explanation is probably something like "making it a block level element removes the text-decoration restriction." I have no idea if it's true, but it kind of makes sense in a weird way.

We got off to a rocky start with this question, but everything seems to have been resolved now (except for the real reason floating my buttons allows them to be underlined). Thank you all for your help, I appreciate it.

You've got a solution but no answer. How odd :?