IE 7 превращает мою горизонтальную навигационную панель в двойную линию

Question

Я работаю над своим сайтом в Firefox 3.0.9 (и я очень зеленый с CSS), и до сих пор это выглядит справедливо. Однако у меня есть плавающая горизонтальная навигационная панель вверху, которая выглядит как спускающаяся вниз. Вот что я пытался сделать до сих пор:

1) Я настроил поля, обнулел отступы и изменил ширину фонового изображения - все безрезультатно.

2) Я попытался создать папку IE7 и указать браузеру другую таблицу стилей - безрезультатно.

3) Я пытался использовать IE7.js для решения проблемы - безрезультатно.

IE сводит меня с ума! Какие-нибудь мысли? Вот мой CSS & HTML (не смеется ;-))

Спасибо!

/ --- мой css --- /

#body       {
        margin: 0px 0px 20px 0px;
        text-align: center; 
        background: #450000 url(images/greenstrip.jpg) repeat-x right top;
        }

#maincontainer  {
        width: 720px;
        border-width: 8px;
        border-color: #fff;
        border-style: solid;
        position: absolute;
        margin-left: 50%;
        left: -360px;
        margin-right: auto;
        }


#box p      {
        position: absolute;
        color: #fffceb;
        width: 450px;
        margin-top: 275px;
        margin-left: 16px;
        background: #373635;
        font-size: medium;
        font-family: "arial rounded mt bold", "times roman";
        text-align: left;
        line-height: 1.5em;
        padding-left:7px;
        padding-right:7px;
        padding-bottom:7px;
        border-style:solid;
        border-color:#bec783;
        border-width: 3px;
        }



#lowerbox p {
        position: absolute;
        color: #fffceb;
        width: 450px;
        background: #373635;
        font-size: medium;
        font-family: "arial rounded mt bold", "times roman";
        text-align: center;
        line-height: 1.5em;
        padding-left:7px;
        padding-right:7px;
        padding-bottom:7px;
        border-style:solid;
        border-color:#bec783;
        border-width: 3px;
        width: 450px;
        margin-top: 433px;
        margin-left: 16px;
        }

#featured p {
        position: absolute;
        color: #000;
        width: 270px;
        margin-top: 825px;
        margin-left: 128px;
        background: none;
        font-size: small;
        font-family: "arial rounded mt bold", "times roman";
        text-align: center;
        line-height: 1.5em;
        }

#customize p    {
        position: absolute;
        color: #000;
        width: 270px;
        margin-top: 825px;
        margin-left: 420px;
        background: none;
        font-size: small;
        font-family: "arial rounded mt bold", "times roman";
        text-align: center;
        line-height: 1.5em;
        }


.name       {
        font-weight: bold;
        font-style: italic;
        color: #bec783;
        }

ul      {
        margin: 0px;
        width: 680px;
        line-height: 0em;
        list-style: none;
        font-size: medium;
        font-family: "arial rounded mt bold", "times roman";
        float: left;
        background: url(images/button.gif);
        }


ul a        {
        display: block;
        padding: 0 1.2em;
        line-height: 2.2em;
        text-decoration: none;
        color: #fff;
        float: left;
        margin-left: 6px;
        margin-right: 0;
        }


ul li       {
        float: left;
        width: auto;
        }


ul a:hover  {
        color:#f26214;
        }

ul a:visited    {
        text-decoration: none;
        }


#textpad ul     {
        position:absolute;
        width:100px;
        margin-top: 335px;
        margin-left: 481px;
        background: none;
        text-decoration: none;
        }


.promise a  {
        display: block;
        color:#000;
        line-height: 1em;
        font-size: 30px;
        font-family: "freestyle script";
        width:150px;
        }

.promise a:visited  {
            text-decoration: none;
            }

#fet a:link, #fet a:visited {
                text-decoration:none;
                color: #000;
                }

#fet a:hover    {
        color:#f26214;
        }



<!---HTML--->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<title>Core 4 Innovative: Website Solutions For Your Small Business</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content=" core 4,web,webpage developer,design,web designer, freelance,low cost" />
<meta name="robots" content="index,follow" />

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>


<body id="body">
<div id="maincontainer">
<table id="Table_01" width="720" height="961" border="0" cellpadding="0" cellspacing="0">


<ul id="nav">
<li><a href="http://www.core4innovative.com/home.html">Home</a></li>
<li><a href="http://www.core4innovative.com/about/about.html">About Us</a></li>
<li><a href="http://www.core4innovative.com/process/our_process.html">Our Process</a></li>
<li><a href="http://www.core4innovative.com/services/services.html">Our Services</a></li>
<li><a href="http://www.core4innovative.com/contact/contactus.aspx">Contact Us</a></li>
</ul>

<div id="textpad">
<ul>
<li class="promise"><a href="#">Affordable Web Hosting Starting at $9.99 per month!<a></li>
</ul>


<div id="box">
<p><span class="name">Core 4 Innovative</span> puts your online success within reach. Using our affordable 
website solutions, unique development process and standardized
methods for design you can be sure to recieve a customized product that adds value to your business!</p>
</div>

<div id="lowerbox">
<p><span class="name">We Serve Every Major Industry:</span></br> 
Restuarants • Real Estate • Insurance • Entertainment • Apparel • Automotive • Energy • Professional Services</p>
</div>

<div id="featured">
<p><span id="fet"><a href="http://www.core4innovative.com/portfolio/portfolio.html" alt="our featured client">Our Featured Client</a></span></p>
</div>

<div id="customize">
<p>Customize Your website</p>
</div>

<tr>
<td colspan="3">
<img src="images/top.jpg" width="720" height="12" alt=""></td>
</tr>

<tr>
<td>

<img src="images/logo.jpg" width="258" height="137" alt=""></td>

<td colspan="2">
<img src="images/apple_graphic.jpg" width="462" height="137" alt=""></td>
</tr>

<tr>
<td colspan="3">
<img src="images/topdivider.jpg" width="720" height="48" alt=""></td>
</tr>

<tr>
<td colspan="2">
<img src="images/topdivider-06.jpg" width="502" height="3" alt=""></td>

<td rowspan="2">
<img src="images/notepad.jpg" width="218" height="305" alt=""></td>
</tr>

<tr>
<td colspan="2">
<img src="images/getaquotebox.jpg" width="502" height="302" alt=""></td>
</tr>

<tr>
<td colspan="3">
<img src="images/roundboxes.jpg" width="720" height="370" alt=""></td>
</tr>

<tr>
<td colspan="3">
<img src="images/footer.jpg" width="720" height="88" alt=""></td>
</tr>

<tr>
<td>
<img src="images/spacer.gif" width="258" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="244" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="218" height="1" alt=""></td>
</tr>
</table>

</div>

</body>
</html>     

Answer 1

Вы забыли поставить навигацию в <td> и <tr>. После запуска <table> все, что находится после этого тега, это не «табличный тег» (например, <th> должно быть в <tr> и <td>. Для получения дополнительной информации об этом см. http://www.w3schools.com/html/html_tables.asp

Чтобы это исправить, просто вставьте свой ul в <tr> и <td>

<tr><td>
<ul id="nav">
<li><a href="http://www.core4innovative.com/home.html">Home</a></li>
<li><a href="http://www.core4innovative.com/about/about.html">About Us</a></li>
<li><a href="http://www.core4innovative.com/process/our_process.html">Our Process</a></li>
<li><a href="http://www.core4innovative.com/services/services.html">Our Services</a></li>
<li><a href="http://www.core4innovative.com/contact/contactus.aspx">Contact Us</a></li>
</ul>
</td>
</tr>

Кроме того, любые другие html-элементы на странице должны быть в тегах <tr> или <caption>) и <td> (например, "box" и "lowerbox" вашего div; div должны быть закрыты прежде чем начать еще один td).

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

Кроме того, чтобы избежать будущих головных болей css, всегда начинайте свой файл css с css reset . Это поможет вам на вашем пути!

CSS, который вы используете для оформления вашей навигации, в порядке. Несмотря на плохой рэп, который получает IE (совершенно заслуженно), ошибки иногда происходят из-за халатности кодера (т.е. вы забыли закрыть теги). Большинство браузеров хороши и игнорируют вашу небрежность, но IE часто не убирает беспорядок в отсутствующих тегах.

Я предлагаю простую структуру страницы для размещения вашего кода.

<html>
<head>
<title></title>
</head>
<body>
    <div id="header">
        <!-- your <ul> nav -->
    </div>
    <div id="content">
        <!-- your table with images (if you really want to use a table! -->
    </div>
    <div id="footer">
        <!-- your footer info -->
    </div>
</body>
</html>

Answer 2

Что ж, избавление от ширины: 680px в ul исправляет это ... не уверен, что это за конкретная ошибка IE, которая его вызывает, но эта ширина, похоже, применяется к последнему элементу в списке, а не к список в целом. Чтобы увидеть его, используйте огненный жук бедняка, поместив рамку в свой стиль ul li (border: solid 1px # f00;).

Возможно, кто-то еще может предоставить более подробную информацию о причинах ...