Forum Moderators: not2easy
<html>
<head>
<style type="text/css">
html, body {
background: #ccc;
color: #000;
font-family: Arial, Helvetica, sans-serif;
text-align: center; /* For IE */
}
h2, h3, h3, div, p, ul, li, input, div {
font-family: Arial, Helvetica, sans-serif;
background-color: #fff;
}
#container {
position: relative;
width: 710px;
background: #fff ;
border: 15px solid #fff;
margin: 0 auto;
padding: 0;
text-align: left; /* For IE, see above */
}
.sectionHeader h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
background-color: #FFFFFF;
display: inline;
float: left;
margin: 0px;
padding: 0px;
}
.sectionText {
background-color: #FFFFFF;
margin-left: 125px;
}
</style>
</head>
<body>
<div id="container">
<div id="aboutSection">
<div class="sectionHeader">
<h3><a name="about" id="about">about</a></h3>
</div>
<div class="sectionText">
<p>bla bla bla</p>
<p>blaha blaha blahaba</p>
<p>more blahabadab</p>
</div>
</div>
</div>
</body>
</html>
The floated .sectionHeader, which contains only one line of text, is causing the adjacent, non-floated content to bump over three pixels.
If you were to add more content to the non-floated sectionText, you would see that any line lower on the page than the floated content would NOT be 'indented' 3px.
From the PIE article linked above...
Observe how the 3px space abruptly ends at the same vertical height that the float also ends. (!) It's now clear that the float is causing the 3px space to be added to the line boxes.
I'll leave the explanation of how to fix the bug to the experts at PIE. Visit the link above and read their article...it's the definitive reference.
cEM
