Skip Navigation

Code combing

Helpful reader Chris Brown pointed out a display issue in IE6/Win; specifically that several of my posts (the Opinion: Reloaded, for example) introduce a sliver of white to the right of the content area. Combing through the code, block by block (it’s a hobby of mine, donchaknow), revealed the source of my woes: justify–align and the CSS box model.

One of the beauties of designing with HTML tables (back in the day) was that the browsers would willfully fudge the layout to accommodate ‘problems’ with your code. If you put a 500–pixels–wide image in a 200–pixels–wide table cell, browsers would simply push the cell out to fit the image… it was a very forgiving way to work. Modern browsers working with CSS, however, are not so forgiving: putting that 500px image in a 200px div means the image will float magically (read: disturbingly) over and above the dimensions of its container. The div, on the other hand, will stay at its defined size of 200 pixels.

Internet Explorer for Windows is another matter.

Sometimes, when justify–aligned text is busy wrapping tidily to the edge of the box, IE fucks up. More specifically, when that justify–aligned text has other formatting applied to it (emphasis, strong emphasis, citation, code, et cetera) and the extra formatting wraps to a new line, it pushes the box beyond its specified dimensions. It breaks the box. Doing as it pleases, it breaks the illusion created by the box’s background image… breaking the site’s aesthetic. Simple as the problem is, the solution poses more of a challenge than it seems.

Forfeiting my precious justify–aligned text is an obvious fix, but it’s one that I don’t care to pursue. Likewise, wrapping another div around the offending content and resizing it would do the trick, but it’s a trashy solution to a trashy problem. I’m not fond of hackery, so anything involving Tantek’s box model hack would be faux pas… leaving me with, well, nothing. Defeated once again at the hands of a terrible browser.

On the upside, this site’s design is constantly in flux (read: in flux whenever the hell I go nuts) and it’s never ever truly complete, so you might find comfort in the knowledge that the problem will one day go away. You might also find comfort in Mozilla Firebird, but that’s really up to you. For now, though, I feel like a pizza.