Jonathon Delacour the heart of things

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:

http://weblog.delacour.net/archives/2002_10.html

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

• bigger font size for Macintosh users;
• choice of serif or sans serif font;
• fixed line length for enhanced readability; and
• a design that fits an 800 pixel wide display.

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:

• settle for one of the default Movable Type templates; or
• abandon CSS and revert to a table-based design.

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

Permalink | TrackBack (0)