Currently, I am in the process of developing a website for my sister but facing challenges with cross-browser compatibility. The menu appears off-screen when using Internet Explorer, while it looks fine on Chrome. Despite various attempts to adjust alignments, I have reached a roadblock and cannot seem to find a solution that ensures consistent loading regardless of the browser being used. Please visit www.claireharbage.com to see the issue firsthand - the menu above the gallery should align with the left side of the gallery. Your assistance in resolving this matter would be greatly appreciated.
Below is the snippet of code containing the problematic menu:
<table width="900" height="704" bgcolor="#222222">
<tr>
<td width="76" height="39" valign="baseline"> </td>
<td width="629" valign="baseline"></td>
<p class="heading"><a href="http://www.claireharbage.com">CLAIRE HARBAGE</a></p>
<td width="50" valign="baseline">
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>Work</span></a>
<div><ul>
<li><a href="/Something.html"><span>Something to Hold On To</span></a></li>
<li><a href="/graf_town.html"><span>Graf-Town</span></a></li>
<li><a href="/Leaving.html"><span>Leaving Neverland</span></a></li>
<li><a href="/punk.html"><span>Pittsburgh Punk</span></a></li>
<li><a href="/5.html"><span>A Place to Stay</span></a></li>
</ul></div>
</li>
<li><a href=""><span>About</span></a>
</li>
<li><a href="#"><span>Wedding</span></a></li>
<li class="last"><a href="http://claireharbage.blogspot.com/"><span>Blog</span></a></li>
</ul>
Additionally, here is the CSS code pertaining to the positioning of the menu:
#menu {
position:relative;
z-index:100;
height:16px;
}
div#menu {
top:40px;
left:-630px;
width:450px;
}
#menu .menu {
position:relative;
top: -1px;
}
#menu * {
list-style:none;
border:0;
padding:0;
margin:0;
}
#menu a {
display:block;
padding:8px 14px 8px 14px;
white-space:nowrap;
}
#menu li {
float:left;
background:#fff;
}