CODEWITHSUNDEEP
htmlcss
Mark Sandman
Mark Sandman

Reputation: 3333

Why does IE respect label CSS width, but not Firefox or Chrome?

I'm trying to write a contact form however my label widths aren't being forced in Firefox or Chrome - IE seems to be working okay though (for once). Here's my HTML

 <form name="" id="" action="" method="post">

            <div id="my_form">

                <div>
                    <label for="username">Username:</label>
                    <input type="text" name="username" id="username" />
                </div>
            <div>
<form>

and here's my CSS

#my_form div label{width:200px;display:inline-block;}

any ideas how I can force the label width, they seem to collapse

Upvotes: 6

Views: 9221

Answers (3)

Matthew Lock
Matthew Lock

Reputation: 13476

After some head-scratching and research, I've found it's because labels are inline elements, which according to CSS documentation should ignore width styling. So, as usual, IE is doing it wrong and Chrome and Firefox are doing it right.

...

set its display property to something other than inline. I've found display: inline-block is the best for achieving what you're going for.

http://doctype.com/firefox-chrome-ignore-widths-my-labels

Upvotes: 1

Roman
Roman

Reputation: 3749

Try this:

#my_form div label{width:200px; display:block; float:left;}

See this running (http://jsfiddle.net/jrpab/), it works fine in Chrome.

Upvotes: 13

hakre
hakre

Reputation: 197659

try:

#my_form label{width:200px;display:block; clear:left; float:left; }
#my_form input{display:block; float:left; width:auto;}

Upvotes: 2

Related Questions