IE/CSS question: second DIV has negative margin

#1 March 11th, 2006, 07:45 PM

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>

#2 March 11th, 2006, 11:25 PM

Kevin Cheung wrote:[color=blue]
> 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.[/color]

Answering my own question:

http://www.positioniseverything.net/explorer/creep.html
http://www.satzansatz.de/cssd/onhavinglayout.html

#3 March 12th, 2006, 07:25 AM

On 2006-03-11, Kevin Cheung <kevin1911@gmail.com> wrote:[color=blue]
> 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.[/color]
[color=blue]
><html>
><head>[/color]

quirks mode?

--

Bye.
Jasen

What is Bytes?

Popular Articles