align text in middle

[wimkumpen]

I have a div (menuleft) that contains menu-items. These menu-items are also div's with a background picture. In those divs you got a link. Now, the problem is to vertical align that text in the middle of the div. If possible, like you see the div with the background image is 207px on 32px, I want that hole area to be clickable for the a href...

In Firefox this works nice. But IE...

#menuleft {
postion: relative;
margin-top: 15px;
}
.menuleft-item {
display: table;
background: transparent url('/images/left_menu.jpg') no-repeat;
width: 207px;
height: 32px;
margin-top: 5px;
text-align: right;
}
.menuleft-item a {
display: table-cell;
vertical-align: middle;
width: 270px;
height: 32px;
color: #FFF;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
padding-right: 15px;
}

<div id='menuleft'>
<div class='menuleft-item'>
<div>
<a href="...">...</a>
</div>
</div>
<div class='menuleft-item'>
<div>
<a href="...">...</a>
</div>
</div>
...
</div>

 

[Vragabond]

Why not use a table? You're redefining other elements to behave like a table, surely something that IS, usually works better than something behaving like one?

Or, if you want to take the table stuff out, you could easily achieve the middle vertical centring by:

a) setting line-height instead of height if your menu items fit in one line.
b) paddings on top and bottom if your menu items span multiple lines.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]