CSS float and width properties problem in IE and Firefox?

Coupon Codes, Rebates & Free Shipping Codes
PCmover - $15 Off with Coupon Code S6ch2
muvee Reveal takes your photos, video and music
and automatically creates your own highly polished
personal muvee.
Visit the Nuance store today
Download a Free Trial of Acronis True Image 2009
Visit the CA US Store!
10% Off - 1 YR - Trend Micro Internet
Security 2009 - Coupon Code: TrendIS.
Get 10% off any purchase at MacSpeech.com
when you use the coupon code DICTATE10!
Get PowerDirector 7 Ultra from Cyberlink - optimized
for Intel Core i7

Hi,

when the following page:

http://www.geocities.com/iamsupersupersu...

is viewed in IE, you can see that the two textboxes are horizontally aligned correctly this is because I have set the widths of the labels to 80px by using CSS. However, when this page is viewed in firefox, the two textboxes are no longer horizontally aligned correctly.

I can't understand why firefox doesn't seem to be aware of the widths that are set to the labels.

But if I add another CSS property float: left to the labels, so it altogether becomes:

label{width: 80px;float: left;}

You can view it here:

http://www.geocities.com/iamsupersupersu...

then both IE and firefox can display the page correctly.

could somebody plz explain this weird behavior and why the float: left property is required in firefox but not in IE?

Thank you very much for your help.

CSS float and width properties problem in IE and Firefox?safari browser

The <label> tag is an compact box that behaves as an inline tag (it has no width and ignores the width property). Imagine, for example setting the width on an inline tag such as <b> - this would be meaningless.

Using a float:left forces a compact box to behave as a block (like <p> or <div> tags) - which now pays attention to the width property.

A more complete explanation can be found at http://www.w3.org/TR/REC-CSS2/visuren.ht...

CSS float and width properties problem in IE and Firefox?

Topic