ansaurus

Question

IE 7 is Turning My Horizontal Nav Bar into a Double Line

Answer 1

A:

Well, getting rid of the width: 680px in the ul fixes it... not sure what the specific IE bug is that's causing it, but that width seems to be being applied to the last item in the list rather than the list as a whole. Use a poor-man's firebug by putting a border in your ul li (border: solid 1px #f00;) style to see it.

Perhaps someone else can provide more detailed info into the why...

Alconja 2009-04-24 02:22:30

Answer 2

+1 A:

You have forgotten to put your nav in a <td> and a <tr>. Once you start a <table>, everything after that tag, that is not a "table tag" (such as <th> needs to be in a <tr>, and a <td>. For more information on this see: http://www.w3schools.com/html/html_tables.asp

To fix this, simply put your ul in a <tr> and <td>

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

Also, any other html elements on the page need to be in a <tr> or <caption>) and a <td> tag (such as your div's "box" and "lowerbox"; the divs need to be closed before you start another td).

If I were you, I would get rid of all of the table elements all together. If you really want to use a table for layout of your content, then use it only in the content area. You do not need to start your table with all your images until you get to the content area.

Also, to avoid future css headaches, always begin your css file with a css reset. This will help you on your way!

The css that you are using to style your nav is fine. For all the bad rap that IE get (totally deserved), the errors are sometimes due to coder negligence (ie you forget to close your tags). Most browsers are nice and ignore your negligence, but IE often does not clean up your missing tag mess.

I offer a simple page structure to place your code into.

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

superUntitled 2009-04-24 05:32:52

Just as a side point, the <caption> element does not need to be in a <td> or <tr>. Nor do the <thead>, <tbody>, or <tfoot> elements. :)

Zack Mulgrew 2009-04-24 17:01:47

naturally! thanks for the clarification. duly noted.

superUntitled 2009-04-24 17:42:40

ansaurus

tags:

views:

answers:

IE 7 is Turning My Horizontal Nav Bar into a Double Line

related questions