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

[cos]

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!

Comments

[dossy.livejournal.com]

"A third possibility is white-space: nowrap, which is not the default for any tag."

That's not true. That's what the <nobr> element does, although it's absent in all the official HTML and XHTML specifications.

Apparently the problem is that some versions of MSIE do not honor white-space: nowrap on inline elements, only block elements. Of course, <p> is a block element, so ... this is strange.

The irony is you are already chunking things up into separate blocks (adding the <p> and </p> ...) so why not just invert it and close your white-space: pre blocks instead? It is (or should be) fundamentally equivalent and require the same amount of extra markup, no?

[cos]

<nobr> was a nonstandard tag that, as you say, was never in any version of HTML, not even the ones that tried to codify the quirks of early Netscape and IE. I just don't recognize its existence :)

It's not that I'm "chunking things into separate blocks", it's that I have a container block that has a whole bunch of different stuff in it, all of which shouldn't wrap. And then there's one particular kind of thing that appears in just a few places in that container block, which should autowrap. The blocks that should autowrap appear inside of <li>'s which appear inside <ul>'s or <ol>'s which are inside something else, so there are several levels of nesting here. I don't want to have to close lists in the middle, just to make something autowrap - and it would mess up the styling of the lists (and the numbering, in some cases).

[dossy.livejournal.com]

Could you email me (mailto:dossy@panoptic.com) the HTML and CSS you're working with so I can see exactly what you've got, then I can make usable suggestions as to what you could do to achieve what you're looking for.

got it!

[cos]

See above.

[dossy.livejournal.com]

Here's an arbitarily narrow column with an unordered list inside. The list is styled to not wrap its elements, but I'll override that for a few particular elements. Lets see:

• fits.
• this doesn't fit inside.
• this doesn't fit either, but it'll wrap.
• again, this won't fit, either.

This works in Firefox 1.5, but IE 6.0 seems to ignore the width: 150px completely when you specify white-space: nowrap. My guess is that IE's box model doesn't allow child elements to bleed outside its parent elements.

[cos]

In IE6, "width" actually means "min-width", so if you have content inside the block that needs it to become wider, it will become wider.

That's different from the problem I was having, which wasn't an issue with the width of the container block, it was simply whether the text would wrap or extend several screenfuls to the right and force horizontal scrolling.

[barking-iguana.livejournal.com]

You already know everything at http://www.blooberry.com/indexdot/css/properties/text/whitespace.htm ?

[cos]

Huh, I wonder why they included the CSS2.1 value "pre-wrap" but omitted "pre-line"? Not that it matters, I'm not trying to make pages that require CSS2.1 quite yet :) Anyway, they claim IE5.5 supports "normal", but of course at some level every browser supports "normal". The bug seems to be that I can't explicitly declare "normal" to override a different white-space property value inherited from the container block.

[dossy.livejournal.com]

"[...] someone found me a page that explicitly said that IE6 ignores "white-space: normal" in quirks mode only."

I tried testing IE 6.0 in strict mode and while it would honor the white-space: normal, I couldn't get it to bleed child elements outside the box of the parent, which you can do in Firefox 1.5.

Ahh, the web ...

[cos]

(see my reply above)

[antimony.livejournal.com]

Ah, so that's why a bunch of stuff fails to wrap. (I do still use IE5 for some things -- I'm using it right now. Bizarrely, it's the fastest and most stable graphical browser on my PowerBook G3, so I use it for checking a lot of sites that I don't need tabbed browsing for. Including this LJ.)

[cos]

IE5 for Mac is an entirely different piece of software from IE for windows. IE Mac was developed seperately from the ground up, from what I know. It has a lot of CSS bugs, but they're its own bugs, unrelated to what's in IE for Windows.

IE for Mac was abandoned, though, and its CSS is so bad, most web designers these days ignore it and assume people have stopped using it. Which I know is not true, but at least it's hopefully true that most people who are still using IE for Mac know they're using something old and obsolete, and know they could be using other browsers, and so expect a lot of a web pages to break and will blame it on their browser, not on the web designer.

[maymaym.livejournal.com]

Wish I'd have seen this earlier. I ran into the same exact problem months ago when I needed to make a rather fussy client happy with his navigation bar. :)

Glad you found the problem though.

[cos]

You ran into IE ignoring white-space: normal and figured out that it only did that in quirks mode?

[maymaym.livejournal.com]

Yes. IE is fun, isn't it?

[pseydtonne.livejournal.com]

Thank you very much for bringing up this question and updating with the answer. That gives me a lot to think about in case I head back into making some web pages. Then again, I learned to make web pages before there was CSS or XHTML, so my pages... well, they're musty and parsed on 486 machines.

-the kids are so modern now with their webbin', Dante

[darkpenguin666.livejournal.com]

I've been searching for this for a good while now. A thousand thanks for publishing :)
If you hadn't, I may well not have got this fixed...

[cos]

Welcome!

Thanks

[(Anonymous)]

Thanks! You helped me.

Re: Thanks

[cos]

Welcome! I'm curious how you ran into this IE6 issue, in what context?

quirksmode triggered by whitespace :-)

[(Anonymous)]

I read on Wikipedia that quicks mode in IE6 is triggered by
* unspecified or absent dactype
* xml-tag before doctype
* white space or comment before doctype.

The latter is what caused my page to keep displaying in quirks mode. Oh do i dislike IE!

Otherwise, nice post and very handy still. Why still relevant? My websites are always working(-ish) in IE6, IE7, IE8, Safari for Mac, FF for win, FF for Mac and Google Chrome. Don't ask me why i still bother with IE6.