5 replies [Last post]
romanandrey
Offline
Regular
Los Angeles
Last seen: 15 years 49 weeks ago
Los Angeles
Joined: 2005-08-13
Posts: 33
Points: 0

I recently learned floated elements expand in height to contain floated children, which eliminates the need for clearing elements.

I've been playing around with this a lot lately, and as usual IE is cranky. In the following example, IE adds the <li> margin/padding to the overall width, pushing the containing div horizontally.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">

<html>
<body>
<div style="border: 1px solid black; width: 300px; float: left;">

<ul style="padding-left: 120px;"> <!-- or margin -->
<li style="float: left;">text text text text text text text text text text text text text text text text text text text text</li>
</ul>

</div>

</html>

You can verify this by changing the padding/margin, and watching the width of the containing div change (in IE).

Is this another example of IE failing to conform to standards, or is this expected behavior for floated elements?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

A Little IE Box Model &amp; Floated Elements

IE in standards mode (which you've set with a full doctype) will honor the correct box model. Padding and border should be added to the width.

romanandrey
Offline
Regular
Los Angeles
Last seen: 15 years 49 weeks ago
Los Angeles
Joined: 2005-08-13
Posts: 33
Points: 0

A Little IE Box Model &amp; Floated Elements

Both Firefox and Opera behave differently: these browsers maintain the 300px width of the containing div regardless of the <ul> margin/padding setting.

I find it hard to believe that IE gets it right and both Opera and Firefox get it wrong.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 24 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

A Little IE Box Model &amp; Floated Elements

I misunderstood you. You're correct, IE is botching this by expanding the container to fit the content with disregard of the specs - a well known error.

romanandrey
Offline
Regular
Los Angeles
Last seen: 15 years 49 weeks ago
Los Angeles
Joined: 2005-08-13
Posts: 33
Points: 0

A Little IE Box Model &amp; Floated Elements

Thank you!

Smile

ps-

Please point to any workarounds, if available

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A Little IE Box Model &amp; Floated Elements

romanandrey wrote:
Thank you!

Smile

ps-

Please point to any workarounds, if available
There are none known. You'll just have to be aware and control content yourself. Sometimes, the IE proprietary {word-wrap: break-word;} will help for horizontal overflow.

If IE7 fixes this, the web developer world will rejoice.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.