Need to center a ul within a div ie6 & ie7

Question

I have a ul that i need to center within a div. The code i have (you'll find below) works in every browser apart from ie6 & ie7 where the content is floated left rather than centered. I've stripped out my code to the very basics. I have tried to work through numerous fixes for this without success as yet so any help on this would be greatly appreciated.

//CSS
#galleryThumbs {
    width:900px;
    height:125px;
    text-align:center;
    margin:0px auto;
}
ul.thumb {
    margin:0;
    padding:0;
    list-style:none;
    display:inline-block;
}
ul.thumb li {
    width:65px;
    height:65px;
    margin:0 2px 0 2px;
    border:1px solid #ffffff;
    display:inline-block;
    float:left;
}

//HTML
<div id="galleryThumbs">
    <ul class="thumb">
        <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb1.jpg"></li>
        <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb2.jpg"></li>
        <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb3.jpg"></li>
    </ul>
</div>

Many thanks in advance Brendan

Answer 1

IE 6 and IE 7 do not support display:inline-block

You can override this with a IE CSS hack to the inline-block elements

zoom: 1;
*display: inline;

I would put those wrapped in IE conditional comments to target IE only.

Demo at http://www.jsfiddle.net/gaby/qArVS/2