I decided in this redesign that I’d use some PNG graphics and a gradient to provide the illusion of a drop shadow at the edges of the main content DIV. If you view the site in a decent browser, like Firefox or Safari, you get the nice effect of continuously scrolling against a shadow. Because PNG files can use binary transparency the edges of the shadow aren’t affected by the variations in color, and the shadow doesn’t stick out. This is all well and good for decent browsers. IE doesn’t do PNG without messy hacks, though, so I’m using this to serve alternate graphics:


body {
background-color : #889FA2;
margin : 0;
font-family : Georgia, serif;
font-size : 100%;
background-image : url(/images/main.gif) !important;
background-repeat : repeat-x !important;
background-position : top !important;
background-attachment : fixed !important;
background-image : url(/dev/null); /* this is for IE */
}
#main {
width : 820px;
height : 101%;
margin : auto;
padding : 0 20px 0 20px;
background-image : url(/images/shadowBG.png) !important;
background-repeat : repeat-y !important;
background-image : url(/images/shadowBG.gif);
background-repeat : repeat-y;
}

At run time I’m swapping in a new URL (a fake one, natch) that IE can use to paint the page background. The second block of code actually serves something, in this case a gif version of the shadow for the content DIV. “Why does this work?” I hear you asking. Well, IE ignores the !important; declaration, and skips ahead to the directives below anything marked that way. It isn’t pretty, and it exploits yet another IE hack, but it does the trick. It really doesn’t seem to cause and significant performance hits either. Short of JS brain surgery it’s the nicest way to do the kind of the design I wanted to do, and not totally sacrifice IE readability.

See, this is how much I care about you—the Windows/IE user.

Any better ideas? You know where I’m found. ~