edit: I think I've solved most of my issues but there is a problem with the left 'more info' list items under some of the images in IE.

If you look under the images some of the 'buttons' have a width that is less than the others: http://tilecutter.org.uk/

It is the same style so why should this be?

<ul class="horizontal_list">
    <li><a href="http://www.tilecutter.org.uk/_link.php?linkid=02" title="link to Flat Bed Tile Cutter 445mm" target="_blank" onClick="javascript: pageTracker._trackPageview('/outgoing/button-buy-02.com');">
buy now</a></li>
    <li><a href="http://www.tilecutter.org.uk/_link.php?linkid=02" title="link to Flat Bed Tile Cutter 445mm" target="_blank" onClick="javascript: pageTracker._trackPageview('/outgoing/button-buy-02.com');">
buy now</a></li>
</ul>

ul.horizontal_list li {
    text-align: center;
    float: left;
    list-style: none;
    padding: 0px;
    margin: 1px;
    border: 1px solid #000000;
    width: 97px;
    font-weight:bold;
}
.horizontal_list li a {
    text-align: center;
    color:#000000;
    text-decoration:none;
    background-color:#96D2F3;
    width: 95%;
    }
.horizontal_list li a:hover {
    text-align: center;
    color:#000000;
    text-decoration:none;
    background-color:#00FF00;
    width: 95%;
    }

Thank you.

I've attached a screen shot to help illustrate my problem.

It is strange as its the same code above and below but for one of the li the background color doesn't fill the whole area.

I believe it has to do with your invalid links, the ones where you have a <div> inside the <a> - you can't do that, and it appears that the opening <a> in that code isn't properly closed.

Validate your code. You're also re-using IDs and ID's MUST be unique.

Thanks. It was a rogue link that wasnt closed.

Will change those IDs although I still can't get my head around the difference!

Maybe this will help -http://css-tricks.com/the-difference...-id-and-class/