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

HTML & CSS
1

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">
                <ul>
                <li><a href="http://www.littlehenrescue.co.uk/" target="_blank">Little Hen Rescue</a></li>
                <li>Blue House Vetenary Surgeons</li>
                
                </ul>
          </div>

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?

2

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’

3

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

vineet

4

Hi,

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: