CSS vertically aligned anchor inside li - IE8/IE9 issue - html

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>Health & Safety Courses
<ul class="sub-menu">
<li>NEBOSH National Diploma</li>
<li>NEBOSH Construction Certificate</li>
<li>NEBOSH Fire Certificate</li>
<li>NEBOSH Distance Learning Couse</li>
<li>IOSH Managing Safely</li>
<li>IOSH Working Safely</li>
<li>Site Managers Safety Training Scheme</li>
<li>Health & Safety Awareness for Employees</li>
<li>Health & Safety Awareness for Managers</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;
}

Answer 1

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;
}