white-space: nowrap; applied to li. doesn't work in IE.

Question

http://forumgallery.rollinleonard.com/artists.php

white-space: nowrap; applied to li. gets very screwy in IE. Instead of each .li item staying together and moving to the next line the whole thing becomes one super long line.

Here is the relevant part of the css (text.css)

.artistlist { margin: 0px; padding: 0; }

li.artistlist { display: inline; margin: 0; padding: 0; font-size: .75em; line-height: 1.7em; word-spacing: 5px; white-space: nowrap; } li.artistlist:after { content:", "; } li.artistlist:last-child:after { content:""; } li.last-child{ content:""; display: inline; margin: 0; padding: 0; font-size: .75em; line-height: 1.7em; word-spacing: 5px; } ul li{ margin:0; padding:0; }

.artistlist li {content: expression(this.previousSibling==null?', ':'');}

Answer 1

The description of the nowrap property of white-space is: "Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a br tag is encountered."

Are you saying that all the li tags are displaying inline? Because that's what you're specifying when you declare "display: inline." With all the list elements inline and unable to break the line without a br tag, you are getting the exact behavior you've defined in your CSS.