okay, i've been fiddling with this for a few hours now and i can't find a decent fix. i have a horizontal menu that uses images to keep each tab resizable. the html is pretty straightforward, just an unordered list. here is the css:
Code:
#menu_item{
font-weight: bold;
margin: 10px auto 0px auto;
list-style-type: none;
height: 30px;
width: 800px;
padding-left: 144px;
}
#menu_item ul {
list-style; none;
text-align: center;
}
#menu_item li {
height: 30px;
display: inline;
list-style-type: none;
float: left;
margin: 0 0 0 0px;
padding: 0 0 0 10px;
background: url(images/menu_1.gif) #e5e5e5 top left no-repeat;
}
#menu_item li a {
color: #000;
background: url(images/menu_1.gif) transparent top right no-repeat;
padding: 6px 10px 0 0;
text-decoration: none;
height: 30px;
display: block;
}
#menu_item li a:hover {
color: #fff;
}
#menu_item li:hover {
background: url(images/menu_2.gif) #e5e5e5 top left no-repeat;
}
#menu_item li:hover a {
background: url(images/menu_2.gif) transparent top right no-repeat;
}
in FF and Opera its fine and displays exactly how i want (horizontal). in IE it displays as a very sloppy vertical menu. when i take the 'display: block' out it is horizontal in IE, but then a lot of the other parameters are screwed, typical IE style. any sort of hack or quick fix for this? |
