Menu loading off-screen in Internet Explorer

I am in the process of writing a website for my sister, and I'm running into a little trouble with cross-browser compatibility. Namely, the menu I am using is loading half off-screen in Internet Explorer, while it looks fine in Chrome. I've tried messing with the alignments, and I've sort of hit a wall and can't figure out how to make it load in the same spot regardless of what browser you are using. You'll see what I mean when you look at the site: www.claireh开发者_Python百科arbage.com. the menu above the gallery should be aligned with the left side of the gallery. Thanks in advance for your help with this, it's greatly appreciated.

Here is the section of code that includes the menu:

<table width="900" height="704" bgcolor="#222222"> 
<tr> 
<td width="76" height="39" valign="baseline">&nbsp;</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>

and here is the CSS code that affects the position 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;
}

To start, personally I don't really recommend the use of tables for controlling site layout. Instead I prefer CSS. You also use a lot of inline styling on the table which makes it difficult to debug.

I can't pinpoint the troublesome CSS for some reason, but it looks like the content in your table is center aligned. You then use a negative left css property to pull the menu content back to the edge of the table.

I don't actually see in your site layout where tables are necessary at all. It is very basic. So something like:

<div id="header" />
<div id="menu" />
<div id="slideshow />
<div id="footer" />

Should get you the content layout you want without all the hassle of the table.

I'm surprised your menu is even showing at all in any browser when you're pushing it to the left by -630px. If you're looking to position your menu div just use margins as top/left positioning, if not properly set relative to a container, will push things relative to the body of your page.

So, change this:

div#menu {
    top:40px;
    left:-630px;
    width:450px;
}

To something like this:

div#menu {
    margin:40px 0 0 20px; //position as you see fit
    width:450px;
}