HTML and CSS Reference
In-Depth Information
Comparing IE's rendering with Firefox, we only have to make a few margin adjustments
on the left and right columns (they are further down the page than they should be), reduce the
size of the footer text, and of course correct the background image in the center column.
Fixing the margins ends up involving adjustments to multiple rules: the
#header
receives
a shorter negative bottom margin, the padding on top of
#navigation ul
is reduced, and the
top margins of the left and right columns are cut in half. Reducing the size of the footer text is
a simple matter of setting a smaller
font-size
.
That leaves the background image behind the link list. Because our design uses a drop
shadow around the entire menu, we decided we wanted that to be a transparent PNG so the
artwork further in the background would be able to show through. Unfortunately, IE 6 doesn't
support 8-bit transparency in PNGs, so we're going to let IE users see an alternate image (a
GIF) that doesn't include the shadow.
These adjustments can all be placed within an IE conditional comment, targeting IE 6
and earlier:
<!--[if lte IE 6]>
<style type="text/css" media="screen">
#header { margin-bottom:-10px; }
#navigation { background-image:url(bg_navigation.gif); }
#navigation ul { padding-top:2em; }
#footer { font-size:65%; }
#col1, #col2 { margin-top:15px; }
</style>
<![endif]-->
These IE-specific styles could also be placed in an external style sheet and the style sheet
linked within the conditional comment. The final layout looks great across browsers and plat-
forms (Figure 6-11), with no hacks in sight.
