Terminally Incoherent

If my blog looked like shit for the past few days then it’s your own fucking fault. You need to get your ass off IE 6.0 and upgrade to a real browser - even if it is IE 7.0. I don’t care - just stop using that antique piece of crap and get with the program. Oh, and thanks for letting me know jackass! I only noticed it today when someone at work wanted to check out my blog.

Anyway, since I have that rant out of the way, I apologize for the way my blog looked in older version of IE. Let me explain what happened. I thought I was going to be clever, and let my <pre> blocks scroll sideways using the overflow CSS atribute:

pre {
	overflow: auto;
}

It turns out that this trick doesn’t work in IE 6.0 and below. My <pre> tags would expand to full width, wrecking havoc to my layout, and generally making things look ugly. Ugh! Fortunately, some dude named Sébastien Lorion already figured this issue out some time in 2005. Here is a quick solution based on his notes:

pre {
	overflow-x: auto;
	width: 450px;
}
 
html>body pre {
	overflow: auto;
}

This works in both IE and firefox. For IE you need to specify the absolute width of your container, and use the overflow-x instead of overflow. The second definition overrides the first, but only in Firefox and other compliant browsers as IE does not understand this type of notation.

Thanks Sébastien!

This entry was posted on Tuesday, July 10th, 2007 at 1:24 pm and is filed under technology, web design, meta. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Related Posts: