CSS vertically aligned anchor inside li - IE8/IE9 issue

Question

I've recently come across a nasty issue in IE8/IE9 (surprisingly, it aligns at it should in IE7). Please check out http://targettedmedia.co.uk/httpdocs

As you can see in Firefox/Chrome or other modern browser, on hover over the top menu, the submenu items should be vertically centered (regardless of one or 2-lined items). Yet, in IE8 and IE9 it just doesn't want to work. I've tried editing the code but to no avail.

Can you please help me? It's just getting too frustrating to handle it. I sincerely thank you in advance!

Here's a sample HTML sub-menu structure:

<ul id="nav" class="dropdown dropdown-horizontal">
    <li><a href="#">Health &#038; Safety Courses</a>
        <ul class="sub-menu">
            <li><a href="#">NEBOSH National Diploma</a></li>
            <li><a href="#">NEBOSH Construction Certificate</a></li>
            <li><a href="#">NEBOSH Fire Certificate</a></li>
            <li><a href="#">NEBOSH Distance Learning Couse</a></li>
            <li><a href="#">IOSH Managing Safely</a></li>
            <li><a href="#">IOSH Working Safely</a></li>
            <li><a href="#">Site Managers Safety Training Scheme</a></li>
            <li><a href="#">Health &#038; Safety Awareness for Employees</a></li>
            <li><a href="#">Health &#038; Safety Awareness for Managers</a></li>
        </ul>
    </li>
</ul>

Here are the specific CSS bits that handle the vertical alignment:

ul.dropdown ul {
 width:400px;
 padding:20px 0 25px 7px;
 background:#6c6c6c;
 font-size:14px;
 font-weight:normal;
}

    ul.dropdown ul li {
     font-weight: normal;
     height:42px;
     line-height:42px;
     float:left;
     margin:0 0 0 15px;
     border-top:1px solid #484848;
    }

    ul.dropdown ul li a:link {
        display:inline-block;
        width:165px;
        padding:0;
        color:#fff;
        text-align:left;
        line-height:normal;
        vertical-align:middle;
    }

Please make your question "self-contained" by including the relevant code in the post. — Sparky
The items are not vertically centered in Opera 12. They align to the top. imgur.com/DW9eP — MetalFrog
@MetalFrog Thanks for pointing that out. So Opera is just an addition to the issue IE8/IE9 has in rendering the code. — Kyprulez
Well, why are you saying that? It works well in Firefox, Chrome and even IE7. How's that IE8/9 doesn't render precisely (Leaving aside Opera which is probably bound by the same missing rule - taking a wild guess that these browsers need something extra specified)? Isn't there another possibility? — Kyprulez
have you tried my answer? or did you solve the problem another way? — kristina childs

kristina childs kristina childs · Accepted Answer · 2012-06-19T16:56:28

Avoid depending vertical-align: middle as it's not supported in many browsers. Instead, remove all your padding and margins from ul.dropdown ul li a:link and add padding to the <li> itself. If you add equal padding to the top and bottom (I would also do padding in em, that way the padding ratio looks the same no matter what size your user has their text set to) it will be equal all around.

ul.dropdown ul li {
    border-top: 1px solid #484848;
    float: left;
    font-weight: normal;
    height: 2em;
    margin: 0 0 0 15px;
    padding: 1em 0;
}

ul.dropdown ul li a {
    color: #FFFFFF;
    padding: 0;
    text-align: left;
    width: 165px;
}

CSS vertically aligned anchor inside li - IE8/IE9 issue

1 Answers