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
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts

    dropdown menu IE6 & 7

    I'm having some issues with my drop-down nav in IE.

    In IE7 the submenu items don't expand the full width (even with width:100%) and there are some gaps between some of the list elements (its very random) which makes it not work so good.

    In IE6 all the menu items are on their own line at 100% width

    In FF and Opera it works beautifully. I'd like to keep it looking and working as it does in FF and Opera, I just need it to work the same (or as well as possible) in IE

    Code:
    #nav, #nav ul { 
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    }
    
    #nav a {
    	display: block;
    	padding:5px 25px 5px 15px;
    	height:100%;
    	background:url(images/arrow.gif) no-repeat #282828;
    	background-position: 90% 60%;
    	border:1px solid #242424;
    	white-space:nowrap;
    	border-top:1px solid #484848;
    	border-bottom: 1px solid #101010;
    }
    
    #nav li { 
    	float: left;
    	
    }
    #nav li ul li
    {
    	float:none;
    	margin-right:0px;
    	
    }
    
    
    #nav li ul li a
    {
    	background-image:none;
    }
    
    #nav li ul { /* second-level lists */
    	position: absolute;
    
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    	border:2px solid #484848;
    }
    
    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    	left: auto;
    	
    }
    
    #nav li a:hover
    {
    	background-color:#383838;
    	color:#FFF;
    }
    
    li.title
    {
    	background-color:color:#181818;
    	padding:5px;
    	font-weight:bold;
    }
    Code:
    <ul id = "nav">
    	<li><a href = "/materials/">Items</a>
    		<ul>
    			<li class = "title">Crafted Items</li>
    			<li><a href = "/materials/category/1/">Cannon Ammunition</a></li>
    			<li><a href = "/materials/category/2/">Consumable Items</a></li>
    			<li><a href = "/materials/category/3/">Manufactured Goods</a></li>
    			<li><a href = "/materials/category/4/">Raw Materials</a></li>
    			<li><a href = "/materials/category/5/">Recruit Experts</a></li>
    			<li><a href = "/materials/category/6/">Ship Outfitting</a></li>
    			<li><a href = "/materials/category/7/">Ships</a></li>
    			<li><a href = "/materials/category/8/">Shipwright Materials</a></li>
    			<li><a href = "/materials/category/9/">Structure Architecture</a></li>
    		</ul>
    	</li>
    	<li><a href = "/recipes/">Recipes</a>
    		<ul>
    			<li><a href = "/materials/category/1/">Cannon Ammunition</a></li>
    			<li><a href = "/materials/category/2/">Consumable Items</a></li>
    			<li><a href = "/materials/category/3/">Manufactured Goods</a></li>
    			<li><a href = "/materials/category/4/">Raw Materials</a></li>
    			<li><a href = "/materials/category/5/">Recruit Experts</a></li>
    			<li><a href = "/materials/category/6/">Ship Outfitting</a></li>
    			<li><a href = "/materials/category/7/">Ships</a></li>
    			<li><a href = "/materials/category/8/">Shipwright Materials</a></li>
    			<li><a href = "/materials/category/9/">Structure Architecture</a></li>
    		</ul>
    	</li>
    	<li><a href = "/information/">Information</a>
    		<ul>	
    			<li><a href = "/structures/books/">Recipe Books</a></li>
    			<li><a href = "/structures/">Structures</a></li>
    			<li><a href = "/resources/">Resources</a></li>
    			<li><a href = "/ports/">Ports</a></li>
    			<li><a href = "/production_lines/">Production Lines</a></li>
    		</ul>
    	</li>
    	<li><a href = "/quests/">Quests</a>
    		<ul>
    			<li><a href = "/port_quests/">Local Trader Quests</a></li>
    			<li><a href = "/euro_traders/">European Traders</a/></li>
    			<li><a href = "/class_quests/">Class Quests</a></li>
    		</ul>
    	</li>			
    	<li><a href = "/tools/">Tools</a>
    		<ul>
    			<li><a href = "/planner/">Character Planner</a></li>
    			<li><a href = "/ship_finder/">Ship Finder</a></li>
    			<li><a href = "/calculator/">Recipe Calculator</a></li>
    		</ul>
    	</li>
    </ul>

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    In IE 7, getting rid of "#nav a { height: 100%; }" will do the trick. I don't have the .sfHover script at the moment to test it in IE 6.

    One weird thing about IE 7—when I test the page, unless I mouse out over the main list items, the sub menu stays on the screen. In other words, if I roll over "Items," then move the mouse down over a sub menu, then move it off to the right, the menu should disappear but instead it stays on the screen. If I move the mouse back over "Items" and then off of it, the sub menu disappears. I don't have any idea why that would happen.

  • #3
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    The height 100&#37; thing seems to have fixed everything in IE7, IE6 is better but now they have huge gaps below the submenu items

    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=]unction() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    Taking out all the whitespace seems to fix the gaps in IE6 (but thats not a great solution) but the menu doesn't stay when you try to mouse down to the submenu elements.
    Last edited by NancyJ; 01-20-2008 at 04:22 AM.


  •  

    Posting Permissions

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