homepage Welcome to WebmasterWorld Guest from 184.72.82.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
puzzle with floats in IE
and solution
teylyn




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved