$10
Navigation wonky in IE 7

This site: http://www.phoenixrecycling.ca/ has IE 7 issues. The menu that should be showing horizontally is showing vertically, and the menu in the black bar at the top has spacing issues.

These are only issues in IE7 - of course!

I need some help to figure out what to tweak in the CSS.

attachment image View Attachment

Jill Chongva | 08/04/10 at 9:11pm | Edit

navigation css ie7

(3) Possible Answers Submitted...

Last edited:
08/04/10
9:31pm
Jeremy Jared says:
You can try this:

add an extra line

float:left

in

#menu ul li {
display:inline;
}
- 08/04/10 9:43pm
  
  Jill Chongva says:
  I don't have that code in the css - so no idea where to put that line :)
  
  j

Last edited:
08/04/10
9:31pm

Pippin Williamson says:

You will need to tweak the colors and sizes just a little, but this is working code, taken directly from one of my css menus that works perfect in IE.



#nav	{

	text-align: left;

	font-size: 1.0em;

	position: relative;

	padding-left: 5px;

	border-style: solid;

	border-width: 1px;

	font-family: sans-serif;

	height: 39px;

}



ul#nav {

	margin: 0;

	padding: 0;

	list-style: none;

	text-transform: uppercase;

}

ul#nav li	{

	position: relative;

	float: left;

	height: 100%;

}

ul#nav li ul {

	position: absolute;

	top: 39px;

	left: -1px;

	display: none;

	z-index: 1000;

	height: auto;

}



ul#nav li ul li	{

	width: 200px;

	margin-top: 0;

}



ul#nav li a {

	display: block;

	text-decoration: none;

	padding: 10px;

	margin-top: 0;

}

ul#nav li:hover > ul { 

	display: block; 

}

ul#nav > li ul > li:hover > ul	{

	display: block;

	left: 200px;

	top: 0px;

}



/* Fix IE. Hide from IE Mac \*/

* html ul li { float: left; }

* html ul li a { height: 1%; }

/* End */



.clearfix:after	{

	display: block;

	content: ".";

	visibility: hidden;

	clear: both;

}

08/04/10 10:06pm

Jill Chongva says:

Here is the code for the top menu in black bar with wonky spacing

#topnavbar {

        background: #000000;

	width: 100%;

	height: 39px;

	color: #FFFFFF;

	margin: 0px auto 0px;

	padding: 0px;

	}

	



#topnavbarcontent {

	width: 960px;

	height: 39px;

	color: #FFFFFF;

	margin: 0px auto 0px;

	padding: 0 60px 0 0;

	}

	



.topnavbarleft {

	width: 190px;

	float: left;

	margin: 0px;

	padding: 0px 5px 0px 5px;

	}

	

.topnavbarleft a img {

	border: none;

	margin: 0 0 1px 5px;

	padding: 0px;

	}



.topnavbarright {

	width: 760px;

	float: right;

	margin: 0px;

	padding: 10px 0px 0px 0px;

        color: #FFFFFF;

	text-align: left;

	}



ul.navigation {

        margin: 0;

	padding: 0 0 0 280px;

	list-style: none;

	height: 32px;

        text-align: left;

}



ul.navigation li	{

	position: relative;

	float: left;

	height: 100%;

        font: 12px Verdana #fff;

        font-weight: bold;

}



.navigation li ul {

	position: absolute;

	top: 28px;

	display: none;

	padding-left: 5px;

	z-index: 1000;

	height: auto;

	background: #000;

}





.navigation li ul li ul	{

	position: absolute;

	left: 200px;

	top: 0;

}





.navigation li ul li	{

	width: 200px;

}



.navigation li a {

	display: block;

	text-decoration: none;

	padding: 5px 10px 5px 10px;

        color: #FFFFFF;

}







/* Fix IE. Hide from IE Mac \*/

* html ul li { float: right; }

* html ul li a { height: 1%; }



/* End */





.navigation li:hover ul { 

	display: block; 

        font-weight: bold;



}





.navigation li:hover ul li ul { 

        display: none; 

        font-weight: bold;

}





.navigation li ul li:hover ul { 

	display: block; 

        font-weight: bold;

}





.navigation li ul li:hover ul a{ 

	display: block; 

        font-weight: bold;



}





ul.navigation > li {

       background: url('images/divider.png') right top no-repeat;



}



.ie-nav-wrapper {

       position: relative;

       z-index: 8000;



}



.navigation a:hover {

background: #D8251E;

height: 18px;

margin-left: -5px;

}

08/04/10 10:07pm

Jill Chongva says:

And here is the code for nav bar with red background

#navbar {

	background: #D8251E;

	width: 947px;

	height: 33px;

	font-size: 11px;

	font-family: Arial, Tahoma, Verdana;

	color: #FFFFFF;

	font-weight: bold;

	margin: 0px;

	padding: 0px;

	}

	

	

#nav {

	margin: 0px;

	padding: 0px;

	}

	

#nav ul {

	float: left;

	list-style: none;

	margin: 0px;

	padding: 0px;

	}

	

#nav li {

        background: url(images/divider2.png) right no-repeat;

	float: left;

	list-style: none;

	margin: 0px;

	padding: 0px;

	}

	

#nav li a, #nav li a:link, #nav li a:visited {

	color: #FFFFFF;

	display: block;

	font-size: 12px;

        height: 16px;

	font-family: Arial, Tahoma, Verdana;

	font-weight: bold;

	text-transform: none;

        margin: 0 auto 0;

	padding: 10px 15px 8px 15px;

	}



#nav li a:hover, #nav li a:active {

	background: #000;

	color: #FFFFFF;

        margin: 0px;

	padding: 9px 15px 8px 15px;

	text-decoration: none;

	}

	

#nav li li a, #nav li li a:link, #nav li li a:visited {

	background: #D8251E;

	width: 150px;

	color: #FFFFFF;

	font-size: 12px;

	font-family: Arial, Tahoma, Verdana;

	text-transform: none;

	float: none;

	margin: 0px;

	padding: 9px 10px 7px 10px;

	}

	

#nav li li a:hover, #nav li li a:active {

	background: #000;

	color: #FFFFFF;

	padding: 7px 10px 7px 10px;

	}



#nav li ul {

	z-index: 20000;

	position: absolute;

	left: -999em;

	height: auto;

	width: 170px;

	margin: 0px;

	padding: 0px;

	}



#nav li li { 

	}



#nav li ul a { 

	width: 140px;

	}



#nav li ul a:hover, #nav li ul a:active { 

	}



#nav li ul ul {

	margin: -32px 0 0 171px;

	}



#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

	left: -999em;

	}



#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

	left: auto;

	}



#nav li:hover, #nav li.sfhover { 

	position: static;

	}

08/04/10 10:13pm

Pippin Williamson says:
It looks as though your top right nav links each have a set width defined (notice how they are all exactly the same width).

Try adding a style like this, just to confirm:
```
ul.navigation li a {

  width: 100px;

}
```
That won't necessarily fix your issue, but it should help narrow it down, and perhaps you could go ahead and use a set width for the links, at least in IE 7 (which could be done with a conditional comment).

If you're unable to get the main nav working with the code I sent earlier, use the same code as is being used in the top nav because it is working 99% correctly, and just adapt it to the main nav.

Last edited:
08/08/10
8:03pm
Ehthisham tk says:
i've a suggestion
ul.navigation {
float:right; /*add this and remove padding:0 0 0 280px*/
}
also try removing div #navbar's margin:0 auto;

Previous versions of this answer: 08/05/10 at 1:01am