Can anyone tell me why, in this example, the second <div
class="content"> gets rendered differently from the (identical) first?
This only happens in IE6; Firefox renders it as I would expect.
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
margin: 0; padding: 0;
}
#main {
margin: 0 auto;
padding: 0;
width: 30em;
}
#main .subsection {
margin: 0 0 1em 0;
border: 2px solid black;
}
#main .subsection .content {
margin: 0; padding: 1ex;
border-left: 2em solid yellow;
}
</style>
</head>
<body>
<div id="main">
<div class="subsection">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus scelerisque gravida nibh. Pellentesque auctor urna
suscipit leo.</p>
</div>
</div>
<div class="subsection">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus scelerisque gravida nibh. Pellentesque auctor urna
suscipit leo.</p>
</div>
</div>
</div>
</body>
</html>
