Welcome to WebmasterWorld Guest from 54.226.241.8

Forum Moderators: not2easy

Message Too Old, No Replies

puzzle with floats in IE

and solution

     

teylyn

9:08 pm on Dec 22, 2005 (gmt 0)

10+ Year Member



Came across a funny thing. Don't know why it happens but found the solution to it. Maybe someone knows why IE does that.

In the following code, there is a paragraph with a float left, followed by a paragraph indented with a left margin. They are used to list item names and item descriptions.

In IE, the description text is indented about 1px for the first few lines, depending on how high the floated paragraph is. In FF and Opera the description text is left aligned just fine.

Here's the code. I've added borders to the paragraphs. Look closely at the alignment of the text with the left border and you will notice the space in IE. (Sorry about all the latin, but I need the filler text to show the effect.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
* {
margin:0;
}
body {
padding: 10px;
}
.item{
float:left;
width:80px;
margin-left: 10px;
border: 1px solid black;
}
.description {
margin-left: 150px;
margin-bottom:10px;
border: 1px solid black;
}
-->
</style>
</head>
<body>
<p class="item">widget 1 bla foo blah blah foo</p>
<p class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ligula nibh, pharetra at, consectetuer id, sodales ac, velit. Nulla eget nulla ac justo sodales eleifend. Vestibulum id justo id justo consectetuer vestibulum. Maecenas elementum, elit vitae pretium vehicula, ipsum ligula ultricies dui, faucibus commodo mauris lacus nec orci. Ut tristique tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget urna. Proin semper, tellus bibendum lacinia faucibus, justo odio ornare diam, eu dignissim erat tellus non magna. Vestibulum ante ipsu</p>
<p class="item">widget 2</p>
<p class="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ligula nibh, pharetra at, consectetuer id, sodales ac, velit. Nulla eget nulla ac justo sodales eleifend. Vestibulum id justo id justo consectetuer vestibulum. Maecenas elementum, elit vitae pretium vehicula, ipsum ligula ultricies dui, faucibus commodo mauris lacus nec orci. Ut tristique tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eget urna. Proin semper, tellus bibendum lacinia faucibus, justo odio ornare diam, eu dignissim erat tellus non magna. Vestibulum ante ipsu</p>
</body>
</html>

Now for the solution: add a

width:500px; 
to the .description and IE displays it fine. Any width assignment will cure the IE behavior, even % values.

How come?

cheers,

teylyn

drhowarddrfine

3:46 am on Dec 23, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



iirc, you'll find this on the PIE site. (positioniseverything)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month