August 12th, 2006


CSS problem: IE6 ignores "white-space: normal"

I've been making web sites for candidates and political groups this year, and the longest part of any new design is making Internet Explorer 6 show the site the same way that it looks in pretty much every other browser. I've run into so many bugs in the way IE6 interprets CSS, and so many hacks and workarounds for them, I have a hard time even keeping track of the ones I've solved. Usually, it's just a matter of spending some time googling and reading, or asking some of my friends who have a lot more web design experience, and then experimenting with the information and tricks I get.

This time, though, Google isn't helping, and my web designer friends have never heard of the problem and have no idea.

The CSS property white-space lets you control how web browsers deal with white space in the HTML source of a bunch of text. Normally, browsers collapse all strings of consecutive whitespace (spaces, tabs, newlines) into single spaces, then wrap text to fit within the box or window - that's white-space: normal, and is the default for most tags. If you apply the style white-space: pre, then the browser will display all white space exactly as it is in the source, preserving your newlines and extra spaces and tabs - that's the default for <pre> tags. A third possibility is white-space: nowrap, which is not the default for any tag. If you apply that style, the browser will still collapse all consecutive whitespace (including newlines) into a single space, but it won't wrap text, so linebreaks appear in the display only where tags like <br /> tell the browser to put them. (CSS 2.1 adds two more values, pre-wrap and pre-line, but I don't know how many browsers support those)

I have a list on a web site where I want to prevent the browser from wrapping text, so I applied white-space: nowrap to the list's class, and that works beautifully in every browser I tested with. But then, I needed to add a few paragraphs in some places inside this list, that should auto-wrap. So I applied the style white-space: normal to just those paragraphs. And in most browsers, that works - the list (the container block) is still "nowrap", but the paragraphs (blocks inside the list) are "normal" and autowrap.

But not in Internet Explorer. Whether I apply white-space: normal from the stylesheet in the .css file, or explicitly in the tag (<p style="white-space: normal">), IE seems to ignore it. The "pre" style of the container tag gets inherited, and the paragraphs stretch out several screenwidths to the right.

Have any of you encountered this? Do you know of any workarounds short of brute-force splitting up into lots of little separate blocks? Do you know any web designers who are good with CSS that you could send this link to?

Update: Collapse )