Cos (cos) wrote,

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: the solution
Failing to recognize "white-space: normal" was an IE5 bug. IE6 can run in "quirks mode", where it emulates IE5 CSS bugs, or "standards mode", where it tries to do the right thing. Putting a DOCTYPE definition at the top of the page, specifying a recent standard document type definition like HTML4 or XHTML1, should put IE6 in "standards mode", and I do indeed have DOCTYPE definitions at the tops of my pages. However, I recently also added the xml prolog (<?xml version='1.0' encoding='iso-8859-1'?>) to my pages. That's what you're supposed to do for XHTML, but little did I know that,
    In Explorer 6 Windows, Microsoft implemented one extra rule: if a doctype that triggers strict mode is preceded by an xml prolog, the page shows in quirks mode. This was done to allow web developers to achieve valid pages (which require a doctype) but nonetheless stay in quirks mode.
So, IE6 was back to interpreting my pages in "quirks mode", emulating all the IE5 bugs, among them failing to obey "white-space: normal". The key to the solution was when someone found me a page that explicitly said that IE6 ignores "white-space: normal" in quirks mode only. Then I could narrow down my search to figuring out what puts IE6 in quirks mode. But that fact was hard to find!

  • Post a new comment


    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.