On August 24, 2001 Bert Bos created the following code:
<div class="back"> <div class="section"> <h2>Heading</h2> ... </div> </div>
div.back {
clear: both;
page-break-before: always;
margin: 3em -0.75em 3em 1em;
padding: 1.5em;
}
div.back {background: #567;}
(omissis)
div.section {
background: #fbfbff;
margin: -3em 0 0 -3em;
padding: 1.5em;
border: thin solid #999;
}
The box with class "section" is explicitly offset by setting its top and left margins to negative lengths, so that it creates a drop shadows effect also through the different background colors. This solution works fine on standard compliant browsers (Firefox, Opera, etc.), but not in Internet Explorer. In fact, we have to deal with some typical IE's layout problems, such as:
Internet Explorer has huge problems with negative margins. Often a good solution is to declare
'position: relative' for the selected box, but in this case this workaround doesn't work.
Bert uses padding to add some space to the shadow. Internet Explorer adds too much padding to the box.
Internet Explorer has some problems to define the exact dimensions of a containing block when an explicit width has not been set for the element.
So we have to try another solution, less ingenious and sharp than Bert's one:
div.back {
margin: 3em auto;
background: #567;
color: #000;
padding: 0;
width: 600px;
}
/*\*/ * html div.section {
width /*\*/: 600px;
}
/**/
div.section {
background: #fbfbff;
position: relative;
top: -14px;
left: -14px;
color: #000;
margin: 0;
padding: 0;
border: 2px solid #999;
}
We use the relative positioning to fix the main problem. Notice the hack marked in red, used to give Internet Explorer 5 Win layout. An explicit width for the element with class "back" is required by Internet Explorer.