Question

I have a layout here:

https://dustinhendricks.com/breastfest/index.html

Works well except in IE7 (or IE8 Compatibility View), where I believe the inline-block menu elements aren’t working, which is expected on ie7. I tried the trick of setting zoom: 1 and *display: inline for ie7, but still doesn’t seem to be working. Any ideas?

HTML

<ul>
    <li><a href="#" class="selected" title="The Breastfest Homepage">Home</a></li>
    <li><a href="#" title="Learn more about The Breastfests">About</a></li>
</ul>

CSS

#main #header ul {
    float: right;
    clear: right;
    margin-top: 13px;
    margin-right: 12px;
    list-style: none;
    max-height: 45px;
}

#main #header ul li {
    display: inline;
}

#main #header ul li a {
    position: relative;
    text-decoration: none;
    display: inline-block;
    height: 45px;
    color: #f0d8be;
    font-size: 20px;
    line-height: 45px;
    margin-left: 13px;
    letter-spacing: 1px;
    zoom: 1;
    *display: inline;
}

#main #header ul li a:hover {
    height: 47px;
    top: -2px;
}

#main #header ul li a.selected {
    background: transparent url(../images/menu-selected.gif) bottom center no-repeat;
}

Note: I would also like to keep the hover effect intact.

Answer 1

The problem was that the ul was floating. Had to switch this to an absolute positioning to fix.