Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    6
    Thanked 6 Times in 6 Posts

    CSS IE7 Menu stuff ups

    Hi there i have been working on this problem for quite some time and i just cant seem to fix it the problem relates to IE7 displaying the menu incorrectly leaving this gaps between li's heres a pciture of what im talking about



    youll notice the gap between the lines

    The CSS i have used

    Code:
    /*************** Vertical Nav ******/
    #nav-vert { margin-bottom:1.3em;}
    
    /************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
    #nav-vert li { position:relative; text-align:left; background:#606060; width: 15em;}
    #nav-vert li.over { z-index:999; }
    #nav-vert a ,
    #nav-vert a:hover { display:block; text-decoration:none;}
    #nav-vert span { display:block; cursor:pointer; white-space:nowrap; }
    #nav-vert li ul span {white-space:normal; background:#606060;  vertical-align: bottom;}
    
    /************ 0 LEVEL  ***************/
    /*#nav-vert li { float:left; }*/
    #nav-vert li { }
    #nav-vert li.active a {  }
    #nav-vert a { padding:5px 12px 6px 8px; color:#BBB; }
    #nav-vert li.over a,
    #nav-vert a:hover { color:#EEE; font-weight:bold;}
    
    /************ 1ST LEVEL ************/
    #nav-vert ul li,
    #nav-vert ul li.active { float:none; margin:0; border:0px;}
    #nav-vert ul li.last { background:#606060; }
    
    #nav-vert ul a,
    #nav-vert ul a:hover { float:none; padding:0;  }
    #nav-vert ul li a { font-weight:normal !important; }
    
    /************ 2ND LEVEL ************/
    #nav-vert ul { position:absolute; width:15em; top:10px; left:-10000px; border:1px solid #202020 !important; }
    
    /* Show menu */
    #nav-vert li.over > ul { left:100px; }
    #nav-vert li.over > ul li.over > ul { left:100px; }
    #nav-vert li.over ul ul { left:-10000px; }
    
    #nav-vert ul li a {  }
    #nav-vert ul li a:hover { color:#EEE !important; font-weight:bold !important;}
    #nav-vert ul li a,
    #nav-vert ul li a:hover { }
    #nav-vert ul span, #nav-vert ul li.last li span { padding:3px 15px 4px 15px;}
    
    /************ 3RD+ LEVEL ************/
    #nav-vert ul ul { top:0px; }
    The Html

    Code:
    <ul id="nav-vert">
    	<li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"
    		class="level0 nav-guitars parent"><a
    		href="http://lmcguitar.com.au/guitars.html"><span>Guitars</span></a>
    	<ul class="level0">
    		<li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"
    			class="level1 nav-guitars-electric-guitars parent"><a
    			href="http://lmcguitar.com.au/guitars/electric-guitars.html"><span>Electric
    		Guitars</span></a>
    		<ul class="level1">
    			<li class="level2 nav-guitars-electric-guitars-musicman"><a
    				href="http://lmcguitar.com.au/guitars/electric-guitars/musicman.html"><span>Musicman</span></a>
    			</li>
    			<li class="level2 nav-guitars-electric-guitars-b-c-rich last"><a
    				href="http://lmcguitar.com.au/guitars/electric-guitars/b-c-rich.html"><span>B.C
    			Rich</span></a></li>
    		</ul>
    		</li>
    		<li onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"
    			class="level1 nav-guitars-acoustic-guitars last parent"><a
    			href="http://lmcguitar.com.au/guitars/acoustic-guitars.html"><span>Acoustic
    		Guitars</span></a>
    		<ul class="level1">
    			<li class="level2 nav-guitars-acoustic-guitars-cort last"><a
    				href="http://lmcguitar.com.au/guitars/acoustic-guitars/cort.html"><span>Cort</span></a>
    			</li>
    		</ul>
    		</li>
    	</ul>
    	</li>
    </ul>

    Thanks Kieran

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Hi there i have been working on this problem for quite some time and i just cant seem to fix it the problem relates to IE7 displaying the menu incorrectly leaving this gaps between li's
    Could you post a link o your page?

    btw, don't reply completely on javascript to make drop down effects. It will create some accessibility issues for those who have no js support in their browser. Use a CSS based drop down instead, see http://htmldog.com/articles/suckerfish/dropdowns/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    76
    Thanks
    6
    Thanked 6 Times in 6 Posts


  •  

    Posting Permissions

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