SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with dropdown nav in IE7

    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. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Go ahead and float your sub li left also to kill the IE7 whitespace bug.

    Code:
    ul#main-nav li ul li {float:left;}/*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. #3
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 !


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •