Загрузка меню за кадром в Internet Explorer

Question

Я нахожусь в процессе написания веб-сайта для моей сестры, и у меня возникли небольшие проблемы с кросс-браузерной совместимостью.А именно, меню, которое я использую, загружает половину вне экрана в Internet Explorer, в то время как в Chrome оно выглядит нормально.Я попытался возиться с выравниванием, и я как бы ударил стену и не могу понять, как заставить его загружаться в одном месте независимо от того, какой браузер вы используете.Вы поймете, что я имею в виду, когда загляните на сайт: www.claireharbage.com.меню над галереей должно быть выровнено с левой стороны галереи.Заранее спасибо за вашу помощь в этом, это очень ценится.

Вот раздел кода, который включает в себя меню:

<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>

и вот CSSкод, который влияет на положение меню:

#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;
}

Answer 1

Я удивлен, что ваше меню вообще отображается в любом браузере, когда вы нажимаете его влево на -630px. Если вы хотите позиционировать свой div меню, просто используйте поля как верхнее / левое позиционирование, если оно неправильно настроено по отношению к контейнеру, оно будет толкать вещи относительно тела вашей страницы.

Итак, измените это:

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

Примерно так:

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

Answer 2

Для начала лично я не очень рекомендую использовать таблицы для управления макетом сайта.Вместо этого я предпочитаю CSS.Вы также используете много встроенных стилей для таблицы, что затрудняет отладку.

По какой-то причине я не могу точно определить проблемный CSS, но похоже, что содержимое вашей таблицы выровнено по центру.Затем вы используете отрицательное левое css-свойство, чтобы перенести содержимое меню обратно к краю таблицы.

На самом деле я не вижу в макете вашего сайта, где вообще нужны таблицы.Это очень просто.Итак, что-то вроде:

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

Должен предоставить вам макет контента, который вы хотите, без всех хлопот таблицы.