No love for IE(Horizontal CSS rollover center)

Horizontal css rollover center

[kelton5020]

Well, I'm trying to make a "centered horizontal bar, with changing backgrounds when you roll over the link". Sounds simple enough, well, not when you have to contend with multiple browsers. This is where I'm at.

CSS(The relevant portion anyhow)
#cont{
display: block;
background: #CCCCCC url(back2.gif) no-repeat top center;
width: 100%;
height: 721px;
 margin-left: auto;
 margin-right: auto;
top: 0px;
position: relative;
}
#setlist{
padding: 0px;
margin: auto auto;
position: relative;
text-align: center;
vertical-align: middle;
top: 79px ;
width: 985px;
height: 39px;
display: inline; 
font: 14pt 'bold "Comic Sans MS"';
}
#setlist2{
position: relative;
text-align:center;
vertical-align: middle;
width: 100%;
display: inline;
font: 14pt 'bold "Comic Sans MS"';
}
#setlist ul, #setlist2 ul{
position: relative;
list-style-type: none;
text-align: center;
margin-left: auto;
margin-right: auto;
display: block;
}
#setlist ul li, #setlist2 ul li{
vertical-align: middle;
margin: auto auto;
padding: 0px;
width: 102px; 
height: 30px;
color: white;
list-style-type: none;
display: inline;
}
#setlist ul li a, #setlist2 ul li a{
vertical-align: middle;
margin: auto auto;
padding: 0px;
width: 102px; 
height: 30px;
color: white;
list-style-type: none;
display: inline;
background: transparent no-repeat top center;
}
#setlist ul li a:Hover, #setlist2 ul li a:Hover{
vertical-align: middle;
width: 102px; 
height: 30px;
color: white;
list-style-type: none;
display: inline;
background: transparent url(bback.gif) no-repeat top center;
 margin-left: auto;
 margin-right: auto;
}

And the associated unordered list, complete with div's

<div id="cont">
<div id="setlist">
<ul>
<li><a href="index.php" >Home</a></li>
<li><a href="#" >Repair</a></li>
<li><a href="#" >Software</a></li>
<li><a href="consignup2.php" >Jobs</a></li>
<li><a href="#" >Contact Us</a></li>
<li><a href="#" >Log In</a></li>
</ul>
</div>

Now, for the kicker. I can pull off this feat in FF perfectly using display: table and display: table-cell....it was almost too good to be true...popped open IE, and of course, the obvious fact that css tables, in that sense, are not supported in IE.

Now, I can ALSO, change the css code so that it works in IE...but mind you then the code is not correct, as we all know, so it won't function anywhere else correctly...

I'm comming here as a last ditch effort, in hopes I can make a multi-browser CSS file, and not have to script a cascading IE destroyer switch that changes css files depending on browser and such...

Everyone put their heads together, this is a toughy...I've been working on this one part for about 10 hours. I'd really like to make this work, and I just made some boneheaded mistake.

Also, the code above, at this point, works flawlessly in IE...but in FF the background div's that hold the rollover image are too small....this comes from the problem that you're not supposed to be able to resize an inline control, and it just so happens that IE doesn't realize that, so it works.

Good luck?

[kelton5020]

Apparently my code is flawless?