10 replies [Last post]
DiMono
Offline
newbie
Last seen: 11 years 29 weeks ago
Joined: 2007-10-01
Posts: 5
Points: 0

I recently (meaning today) found out that I cannot apply text-decoration to an input type="button" under xhtml strict. It works under html 4.01 transitional, but not xhtml strict. Is there a way to get underline and line-through working on my buttons under xhtml strict, or do I need to switch to html for this one?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 35 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

(No subject)

Verschwindende wrote:
  • CSS doesn't make pies

DiMono
Offline
newbie
Last seen: 11 years 29 weeks ago
Joined: 2007-10-01
Posts: 5
Points: 0

Okay, I'll include code then.

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?

Triumph (not verified)
Anonymous's picture
Guru

Is that really all of your

Is that really all of your code? *sigh*

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

DiMono
Offline
newbie
Last seen: 11 years 29 weeks ago
Joined: 2007-10-01
Posts: 5
Points: 0

Yes, it's really all of the

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+

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 15 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Styling form controls is a

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Triumph (not verified)
Anonymous's picture
Guru

Your html 4.01 doctype is

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.

DiMono
Offline
newbie
Last seen: 11 years 29 weeks ago
Joined: 2007-10-01
Posts: 5
Points: 0

Now we're getting somewhere

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.

Triumph (not verified)
Anonymous's picture
Guru

I was just messing around

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.

DiMono
Offline
newbie
Last seen: 11 years 29 weeks ago
Joined: 2007-10-01
Posts: 5
Points: 0

That's crazy

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 35 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

You've got a solution but no

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

Verschwindende wrote:
  • CSS doesn't make pies