[RESOLVED] Ie6

[CascadingIdiot]

Hi,

#nav here looks correct in FF.

Set to 30px in css, and looks like this in IE6. It's obviously not correct.

I don't get it.

[CascadingIdiot]

http://www.positioniseverything.net/...ingboxbug.html

well, i think i found my answer.

[Centauri]

Have you apllied some sort of fix? - looks fine in IE6 to me.

[Centauri]

Just looking at your code and spotted an error in the #nav ul - you cannot nest one <ul> directly inside another - the only thing that can be directly inside a <ul> is an <li>.

[Centauri]

Ahh - noticed you added an overflow:hidden. The problem arose from the illegal nesting I mentioned above and the relative shift on the second <ul>. There is no need for that <ul> - the right link can be just another link in the main nav (like it looks as where you originally had it), but styled to display on the right.

First, put the employment link back in the #nav <ul> and apply the id to the <li> :

<ul id="nav">
	<li class="navsep"><a href="site.html">Home</a></li>
	<li class="navsep"><a href="catering.html">About Us</a></li>
	<li class="navsep"><a href="menu.html">Menus</a></li>
	<li class="navsep"><a href="eventplan.html">Event Planning</a></li>
	<li><a href="contact.html">Contact Us</a></li>
	<li id="navIN"><a href="employ.html">EMPLOYMENT</a></li>
</ul>

Next, float the <li>s instead of inline display :

#nav li {
	float: left;
	}

and then float the #navIN <li> to the right :

#nav #navIN {
	float: right;
	}
#nav #navIN a{
	font-size:60%;
	letter-spacing:3px;
	color:green;
	}