positioning issue
I've got a div and am placing a menu inside it which is in a table - so the code is:
<div id="masthead">
<div id="menu"><table width="570" border="0">
<tr>
<td><img src="images/home_on.gif" alt="Home" name="home" border="0" id="home"></td>
<td><a href="midwife.html" onMouseover="imgOver('midwife')" onMouseout="imgOut('midwife')"><img src="images/midwife_up.gif" alt="midwife" name="midwife" border="0" id="midwife"></a></td>
<td><a href="services.html" onMouseover="imgOver('services')" onMouseout="imgOut('services')"><img src="images/services_up.gif" alt="Services" name="services" border="0" id="services"></a></td>
<td><a href="news.html" onMouseover="imgOver('news')" onMouseout="imgOut('news')"><img src="images/news_up.gif" alt="News" name="news" border="0" id="news"></a></td>
<td><a href="contacts.html" onMouseover="imgOver('contacts')" onMouseout="imgOut('contacts')"><img src="images/contacts_up.gif" alt="Contacts" name="contacts" border="0" id="contacts"></a></td>
</tr>
</table></div>
</div>
The menu looks fine in IE6 and Firefox on a PC and Firefox on a Mac is positioned in correctly in Safari and IE on a Mac and is also positioned incorectly in IE7 on a PC.
My CSS code for the div's are as follows:
#menu {
width: 570px;
position:relative;
top:108px;
z-index: 3;
left: 165px;
display:inline;
text-align:left;
overflow: visible;
}
#masthead {
width: 760px;
height: 155px;
margin-top: 0px;
background-image: url(../images/masthead.jpg);
background-repeat: no-repeat;
background-position: center;
}
Can anyone help me with my postioning?
|