Rendering error with a list on IE8, 7, 6

Question

What is the trick to getting IE to display a <ul>?

I am working on a page with a php extension.

I have a simple list.

<ul>
    <li>Stuff one</li>
    <li>stuff two</li>
    <li>stuff three</li>
    <li>stuff four</li>
</ul>

While on Safari and Firefox I get a list that renders properly, on IE it just displays a paragraph.

I have not found one consistant answer on any websites about what could be the problem.

What's happening?

The template is from Matthew James Taylor's 3 column blog style layout. http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm The css is right in the page. Even when I go back and strip the site to bare bones the lists do not display.

Is there the possibility of screwing up the css because of a div style?

Answer 1

IE 6,7,8 should all display unordered lists just fine...

My guess is you have something going on with CSS and/or JS that's causing the list not to be shown in IE.

Answer 2

That works fine in IE 6, do have you any css applied to the list?

Answer 3

No, IE does not display <ul>'s as paragraphs. Something else is wrong. Is it possible that IE-specific css is altering the appearance?

Answer 4

There is nothing wrong with the code, you should get a list of four items in all browsers (and all versions).

Check your code for conditional (MS specific) comments such as:

<!--IE > Hidden code, could be some CSS <![endif]-->

Answer 5

It could be that your CSS rules aren't complete. IE and Opera have a different interpretation of default list styles than other browsers, regarding whether the indentation is done with margins or padding. If you aren't applying the styles correctly, you can end up with a list that looks wrong on the browser you aren't testing on. Here is an article that goes into great detail on the differences between the browsers:

A List Apart: Articles: CSS Design: Taming Lists

Edit: And this one:

Consistent List Indentation

Answer 6

Look for the following code in the CSS code:

#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
}

#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}

As you can see, the rules change the margin, padding, float, etc. on all <ul> and <li> elements within the element with id="header", and the list-style:none; removes the bullets from list items. The real question is: why would only IE honor these CSS rules? You perhaps have a syntax error (accidentally delete a closing tag?) that causes them to render inconsistently.