Wednesday 22 January 2003

Makeover blues and makeover news

If you’ve had enough of my minor makeover, imagine how I feel. I’ve spent much of the last couple of days wrestling with a pernicious IE bug that causes a horizontal scrollbar to appear when either the text size is made smaller or larger or the font switched. One suggested fix is to add this CSS after all the other style declarations:

body {
voice-family: "\"}\"";
voice-family: inherit;
width: expression(document.documentElement.clientWidth-20);

Our old favorite the Box Model Hack called into service once more. Unfortunately, this hack—which I only discovered after I’d solved the problem another way—lops 20 pixels off the right edge of my banner in IE6.

Kris at Cinnamon Interactive advised me to add a 1-pixel border to my (borderless) content box so I could see what was happening when I changed the text size or the font. Once I’d done this I realized that the scrollbars appeared and disappeared without any pattern that I could discern. That freed me to work out an alternative: assigning absolute positioning to the content box instead of the links box. Those of you with a shred of patience remaining can check it here:

This works in all the browsers I can check and it encapsulates the changes I wanted to make:

The horizontal scrollbars still appear at 800 x 600 resolution when the text size is set to Largest but that’s predictable and I can live with it.

I intend to apply the revised stylesheets to the entire site some time tomorrow. If more problems arise, I have two fallback strategies:

Because one thing is certain: this stopped being fun quite some time ago.

Permalink | TrackBack (0)


It really shouldn't be this difficult should it? What I don't get is how we can have a standard and yet each browser appears to interpret parts of the standard differently, resulting in the need for various workarounds.

Your site looks great and I really like your new archive styles. Can you make it pixel perfect in all possible browsers? I doubt it. Should you try? That depends on how much frustration you can take!

Posted by: john on 22 January 2003 at 09:19 PM

It's invisible in Safari (but then so is my blog). I think it's abug wiht margins on div's

Posted by: Kevin Marks on 22 January 2003 at 10:35 PM

This discussion is now closed. My thanks to everyone who contributed.

© Copyright 2002-2003 Jonathon Delacour