List items layout issue only in IE8 (fine in IE7, FF, Safari)

This one is driving me up the wall :evil: so I hope someone can point out what I’ve got wrong here:

edit - unfortunately I can’t post the url as I’m a new member. Here is a screen grab from Browser Lab instead:

The left hand image is IE8 - the right is IE7.

If you look at the footer section you can see one lot of <li> items are all out of wack in IE8 (fine however in IE7, FF 3.5, Safari 4.x)

This seems to be something to do with the <a> within the <li> items. If I remove the links the list items render correctly, however, with the list items linked with an <a> tag within them they don’t.

    <div class="siteDocs">
                <li><a href="" target="_blank">Little Hen Rescue</a></li>
                <li>Blue House Vetenary Surgeons</li>

The linked list item doesn’t render correctly, the unlinked one does. I therefore assumed it must be to do with the CSS controlling that element but the weird thing is, it doesn’t seem to be CSS related. Even if I remove all CSS rules to do with these elements I still get the same effect. Again, only in IE8.

Does anyone know why this is?

Just to add - I can visually correct this problem using a three column <table> for the footer section but it’s obviously not semantically correct and I’d like to correct it ‘properly’

may try posting the url of the site without prefixing “www”

because the information and code you have posted is very less to find the error



The site (Chicubes) looks ok to me on IE8 on xp. Was there a specific platform (vista/windows 7) that was showing the problem?

I assume you are using a current IE8 and not a beta?

Or as a last resort try clearing your cache and temp internet files?

We may need a bit more info if none of the above is true :slight_smile: