See http://reenie.org/test9.php
There are two examples each with three nested divs.
The only difference between the two is that the first example has no
padding in the inner div, the second has 10px padding in the inner div.
The middle div has no padding and its black background should not show
up at all.
In firefox 0.9, the inner div's padding is simply added as it should be.
In Internet explorer 6.0, the inner div's padding causes the middle
div's black background to show, and it overlaps the bottom border of the
outer div.
Is there a workaround for this ? How can I add padding to the inner div
without losing the bottom border in internet explorer ?
Here is the code:
..inner1{
background-color: #FFFFFF;
}
..inner2{
background-color: #FFFFFF;
padding:10px;
}
..middle{
background-color:black;
}
..outer{
border-color: red;
border-style: solid;
border-width:5px;
}
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
test9
</title>
<link rel="stylesheet" href="test9.css" type="text/css">
</head>
<body class="page">
example 1:<br>
<div class="outer">
<div class="middle">
<div class="inner1">
content
</div>
</div>
</div>
<br>example 2:<br>
<div class="outer">
<div class="middle">
<div class="inner2">
content
</div>
</div>
</div>
</body>
</html>
