I’ve been working on recreating a skin that I’ve always considered a classic. What makes it so appealing is its strong sense of depth—the moment I first saw it, I wanted to bring that style into PJBlog. I spent several days planning it out, because the structure is a bit unusual. The background setup alone really needs five separate layers: two at the top, two at the bottom, and one for the middle section.
The first challenge was figuring out how to define those backgrounds within PJBlog in a way that actually made sense. After a lot of rearranging, I finally ended up with a setup that was mostly reasonable.
What makes background handling difficult is not just the number of images, but also how they behave. There are repeating images at both the top and bottom, plus a center background in between. Once repeat behavior gets involved, things stop being straightforward.
Then there’s the difference between repeat and fixed. That part is simple enough if you test it yourself: one moves relative to the page, the other stays visually fixed.
But the real problem was browser compatibility—especially CSS hacks for Firefox, IE7, and IE6.
Because this skin depends on very precise positioning, even the slightest offset breaks the effect. That left very little room for error, so a few CSS hacks became unavoidable.
Using !important
Both IE7 and Firefox support !important, which makes it useful when you need one height for those browsers and a different one for IE6.
.content{background:#f00;height:100px !important;}/* FF\+IE7 */
.content{background:#f00;height:200px;}/* IE6 */
Targeting IE6 and IE7 separately from Firefox
Both *\+html and *html are selectors specific to Internet Explorer, and Firefox does not support them. Among those two, *\+html works as an IE7-specific selector, while IE6 does not recognize it.
That means you can split styles like this:
.content{background:#f00;height:100px;}/* FF */
*html .content{background:#f00;height:200px;}/* IE6 */
*\+html .content{background:#f00;height:300px;}/* IE7 */
Another common pattern uses property prefixes:
height:50px; /*FF*/
*height:100px; /*For IE7 \& IE6*/
_height:150px; /*For IE6*/
The same idea can be applied not only to height, but also to width, margin, padding, and other layout-related properties whenever different browsers need different values.
A few quick CSS hack patterns
IE6 vs Firefox
background:orange; *background:blue;
IE6 vs IE7
background:green !important; background:blue;
IE7 vs Firefox
background:orange; *background:green;
Firefox, IE7, and IE6 all separated
background:orange; *background:green !important; *background:blue;
Ordering matters
One thing that also comes up in practice is the order in which these rules are written. My own preference is consistent regardless of the method: write the Firefox styles first, place IE7 adjustments in the middle, and leave IE6 for last.
There’s also the matter of adding IE8 into the mix. A comparison table for IE6, IE7, IE8, and Firefox CSS hacks can be useful once the project has to stretch across all four.
At the moment, this skin already has an early preview. It renders properly in IE7, IE8, and Firefox, but IE6 still has a few small issues left to solve, and I’m still looking into them.