Cell Hover in IE - Vertically Centering the Text

**Rain Lover** · 08-29-2010, 07:07 PM

Hi,

The following menu doesn't work in IE6:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 

<style type="text/css"> 
.tablemenu { 
            font-family: "Century Gothic"; 
            font-size: 14px; 
            font-weight: bold; 
            font-style: normal; 
            text-align:center; 
            color: #FFFFFF; 
            background-image:url('http://sites.google.com/a/loquemasimporta.com/web/MenuBckg.png');
} 
.overmenu{ 
            cursor: pointer; 
            color: #FFFFFF; 
} 

#cell{background-image:url('../Images/MenuBckg.png'); background-repeat:repeat-x;} 
#cell:hover{background-image:none; background-color:#999999;} 
</style> 
</head> 
<body> 

<table style="width: 900px; height: 50px" class="tablemenu"> 
<tr> 
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com'" >Home</td> 
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/profile'" >Perfil</td> 
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/servicios'" >Servicios</td> 
<td id="cell" class="overmenu" onclick="parent.location='http://blog.loquemasimporta.com'" >Blog</td> 
<td id="cell" class="overmenu" onclick="parent.location='http://dir.mortellmarsol.com'" >Directorio</td> 
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Chat</td> 
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Programas</td> 
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/contact'" >Contacto</td> 
</tr> 
</table> 


</body> 
</html>

I made some changes and now it seems to be working in all major browsers:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head>
<title>Menu</title>

<style type="text/css"> 
table {width:900px; height:50px; font:bold 14px Century Gothic; text-align:center; background-image:url('http://sites.google.com/a/loquemasimporta.com/web/MenuBckg.png')}
a {display:block; height:50px; color: #FFFFFF; text-decoration:none}
a:hover {background-color:#999999} 
</style> 

</head> 
<body> 

<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td><a href="http://www.loquemasimporta.com">Home</a></td>
<td><a href="http://www.loquemasimporta.com/profile">Perfil</a></td>
<td><a href="http://www.loquemasimporta.com/servicios">Servicios</a></td>
<td><a href="http://blog.loquemasimporta.com">Blog</a></td>
<td><a href="http://dir.mortellmarsol.com">Directorio</a></td>
<td><a href="http://www.loquemasimporta.com/home/tv">Chat</a></td>
<td><a href="http://www.loquemasimporta.com/home/tv">Programas</a></td>
<td><a href="http://www.loquemasimporta.com/contact">Contacto</a></td>
 
</tr> 
</table> 


</body> 
</html>

However, now I don't know how to vertically center the text.

Any help is appreciated!
Rain Lover