Jump to content

Problems With Menu Bar In Ie6 And 7


Recommended Posts

I've been developing a simple online store for a friend using wordpress.I designed a wordpress theme from scratch that can be seen here.All works well and I've done my best to make it validate but there are a few minor errors that don't seem too bad and are unavoidable.My main problem is that the horizontal menu bar at the top is not displayed properly in IE6 and 7, although is fine in all other browsers.I am aware of the <!-- if[iE6] ... that I can put in my header but I'm not sure of what css to add to fix it.Here is the html of the menu bar:

<div id="navdiv">		<ul id="navbar">		<li><a href="http://www.snowmo.co.uk">Home</a></li>			<li class="page_item page-item-18"><a href="http://www.snowmo.co.uk/store/" title="DVD Store">DVD Store</a></li><li class="page_item page-item-3"><a href="http://www.snowmo.co.uk/shop/" title="Products">Products</a></li><li class="page_item page-item-69"><a href="http://www.snowmo.co.uk/faq/" title="FAQ">FAQ</a></li><li class="page_item page-item-2"><a href="http://www.snowmo.co.uk/contact/" title="Contact">Contact</a></li>		</ul>		<div class="clear"></div>	</div>

and here is the css applied to it:

/*Menu Bar*/#navdiv {	margin: 0;	padding: 0;	background: #3864AF url('images/navgrad2.png') repeat-x scroll left top;	z-index: 150;}#navdiv ul {	list-style-type: none;	padding-left: 7px;	background-color: #3864AF;}#navdiv ul ul {	background-color: #3F71C6;}#navdiv li:hover {	background: #457BDB url('images/navgrad1.png') repeat-x scroll left top;}#navbar {}#navdiv li {	float: left;	font-size: 1.0em;	color: #444444;	font-family: Arial, Helvetica, sans-serif;	text-transform: lowercase;	font-weight: bold;	margin: 0;	-webkit-border-radius: 5px;	-moz-border-radius: 5px;	-khtml-border-radius: 5px;	border-radius: 5px;}#navbar a {	display: block;	padding-left: 9px;	text-decoration: none;	color: #e6f4ff;	padding: 7px;	padding-right: 11px;}#navbar ul {	position: absolute;	left: -999em;	width: 11em;	padding: 0;	border-bottom-right-radius: 6px;	-moz-border-radius-bottomright: 6px;	-webkit-border-bottom-right-radius: 6px;	border-bottom-left-radius: 6px;	-moz-border-radius-bottomleft: 6px;	-webkit-border-bottom-left-radius: 6px;}#navbar ul li {	width: 100%;}#navbar li:hover ul {	left: auto;}

The menu bar is 100% html and css - no javascript. I'm hoping a quick easy fix is what is requiered but not sure what css to add to fix it...Any help appreciatededit: I am aware some of the css is redundant as there are no sub-menus in the html. I left this css in there just in case for drop-down menus

Edited by miocene
Link to comment
Share on other sites

Maybe it has to do with some of the padding in #navdiv ul? (7px)That and/or your #navbar a has a lot of of padding going on, so maybe its a combination of all the various padding styles you have.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...