miocene Posted November 2, 2009 Report Share Posted November 2, 2009 (edited) 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 November 2, 2009 by miocene Link to comment Share on other sites More sharing options...
thescientist Posted November 2, 2009 Report Share Posted November 2, 2009 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 More sharing options...
miocene Posted November 2, 2009 Author Report Share Posted November 2, 2009 Well the padding is not really the issue...The main problem in IE 6 and 7 is that the menu bar background is grey and the gradient background image is not displayed. The whole menu bar is also shifted to the rightTry looking on this site which shows screenshots of pages rendered in IE Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now