Problem with dropdown nav in IE7

HTML & CSS
1

Hi

I’m currently building my first site and want to do a navigation bar with drop down menues.

I got it working ok in IE 8 and Firefox using markup generated using the wizard at www.accessify.com

But today I tried it on another pc which has IE7 and the dropdown menues have gaps between each link and only the first one works.

I assume that i need to make a css file just for IE7 but don’t really know what I’m gonna need to change. I’d apreciate any pointers.

Thanks in advance for your help!

This is the markup I copied from the wizard:

FIRST THE CSS

ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;font-size:0.9em;}
ul#main-nav li {margin:0;padding:0;list-style:none;float:left;margin:0;width:9em;}
ul#main-nav li a {text-decoration:none;display:block;padding:0.6em;color:#0e0e0e;background:#cfcfcf;border-left:2px solid #fff;border-right:2px solid #fff;}
ul#main-nav li a:hover, ul#main-nav li a:focus {background:#ece1cf;border-left:2px solid gray;border-right:2px solid gray;}
ul#main-nav li ul {padding:0;margin:0;display:none;}
ul#main-nav li:hover ul {display:block;}
ul#main-nav li ul li {float:none;}
ul#main-nav li ul li a {font-size:0.9em;}

THEN THE XHTML

<ul id=“main-nav”>
<li><a href=“undefined”>undefined</a></li>
<li><a href=“index.html”>Home</a></li>
<li><a href=“timeline.html”>Timeline</a></li>
<li><a href=“places.html”>Places</a>
<ul>
<li><a href=“andalusia.html”>Andalusia</a></li>
<li><a href=“aragon.html”>Aragon</a></li>
<li><a href=“asturias.html”>Asturias & Cantabria</a></li>
<li><a href=“balearics.html”>Balearic Islands</a></li>
<li><a href=“basque.html”>Basque Country /Navarra / Rioja</a></li>
<li><a href=“castleon.html”>Castilia & Leon</a></li>
<li><a href=“castmanch.html”>Castilia La Mancha</a></li>
<li><a href=“catalonia.html”>Catalonia</a></li>
<li><a href=“madrid.html”>Com. of Madrid</a></li>
<li><a href=“extremadura.html”>Extremadura</a></li>
<li><a href=“galicia.html”>Galicia</a></li>
<li><a href=“murcia.html”>Murcia</a></li>
<li><a href=“valencia.html”>Valencia</a></li>
</ul>
</li>
<li><a href=“fairs.html”>Fairs / Festivals</a></li>
<li><a href=“miscelaneous.html”>Miscelaneous</a>
<ul>
<li><a href=“history.html”>History / Legends</a></li>
<li><a href=“books.html”>Books</a></li>
<li><a href=“practical.html”>Practicalities</a></li>
</ul>
</li>
</ul>

2

Hi,
Go ahead and float your sub li left also to kill the IE7 whitespace bug.

ul#main-nav li ul li {[COLOR=Blue]float:left;[/COLOR]}/*float:none*/

markup generated using the wizard at www.accessify.com

There is a better way to hide the sub ul rather than display:none/block

A more robust method is to set the sub ul as position:absolute; and then hide it with a large negative margin. Then bring it into view by setting the margin to zero on hover.

Here is an example with all the IE6/7 fixes in place.

Hope that helps

3

Thanks Rayzur

I’ve made the change you suggested to the CSS and it worked (at least when I use “developers tools” to simulate IE7 it works )

I’ve been looking at the better method you suggest and at the moment (that is to say with my current knowledge of CSS) its a bit hard to understand. Hopefully in the next few days I’ll have some time to look thru the examples on your website and once I get a better understanding of how it works will try and implement it on my site.

Thanks again !