...

View Full Version : IE6/7 adding vertical indent to horizontal <ul> menu



jehead
02-12-2009, 12:25 AM
Greetings fellow web wizards. I'm building a theme for some web design software, and incorporating split navigation using an unordered list. As to be expected, the only browsers having difficulty displaying this correctly are IE6/7. Here's the relevant html code and css:

HTML


<div id="subMenu">
<ul><li><a href="../index.html" rel="self">Home</a></li><li><a href="page2.html" rel="self" id="current">Styled Text</a><ul><li><a href="../page2/page1/page1.html" rel="self">4-Tiered</a></li><li><a href="../page2/page3/page3.html" rel="self">Split Menus</a></li><li><a href="../page2/page15/page15.html" rel="self">Really Long Link Name</a></li></ul></li><li><a href="../page9/page9.html" rel="self">Blog</a></li><li><a href="../page10/page10.php" rel="self">Contact Form</a></li><li><a href="../page11/page11.html" rel="self">File Sharing</a></li><li><a href="../page12/page12.html" rel="self">Movie Album</a></li><li><a href="../page13/page13.html" rel="self">Photo Album</a></li></ul>
</div>

CSS (general stylesheet)


#subMenu ul {margin: 0;padding: 0;list-style: none;}
#subMenu ul li {display: list-item;}
#subMenu li a {display: none;}
#subMenu ul ul {margin: 0;padding: 0 5px;width:100%;list-style-type: none;}
#subMenu ul ul li {line-height: 40px;display:block;float: left;}
#subMenu ul ul a {display:inherit;float:left;padding:0 10px;color: #999;font-size: 1.2em;text-transform: uppercase;text-decoration: none;}
#subMenu ul ul a:hover{color: #e4e4e4;}
#subMenu ul ul #current{font-weight: bold;color: #fff;letter-spacing: 1px;}
#subMenu ul ul .currentAncestor {color: #fff;text-decoration: overline;}
#subMenu ul ul ul {display: none;}

CSS (conditional comments for IE 6/7)


#headerTransition {font-size: 1px;}
#subMenu ul ul {padding: 0;}
#subMenu ul ul li {padding-top:5px;display:block;line-height:20px;}
#subMenu ul ul a {display:block;font-size:12px;}

The problem is both IE 6/7 add a ~5px vertical indent to the menu items displayed in this submenu. For example, when "Styled Text" is the current page selected in the main menu, the submenu displays its child menu items fine. However, when the next main menu list item ("File Sharing") with children is selected, the submenu displays its menu items 5px lower. And this continues, so that the next main menu item with children is another 5px lower, etc. Obviously, I'd like the menu items in the submenu to be displayed without this 5px vertical indent.

Any thoughts/advice/pointers on how to address this would be greatly appreciated. Many thanks for your time. :)

Excavator
02-12-2009, 03:28 AM
Hello jehead,

A lot of times you can eliminate odd margin/padding with a universal reset. Add this to the top of your CSS file:


* {
margin: 0;
padding: 0;
}

That will eliminate all default margin/padding. You may need to go and specify margin or padding on things that had it before and were spaced the way you like.

Hope that helps a little.

jehead
02-12-2009, 04:52 AM
Excavator, thanks for your suggestion - I already have such a declaration at the top of my stylesheet though ;)

abduraooft
02-12-2009, 08:04 AM
The above posted code displays nothing in IE.
(I need to comment #subMenu li a {display: none;} to see something)

Could you post a link to your page?

jehead
02-12-2009, 03:13 PM
Wasn't sure if posting a link here was kosher, but since you ask ;)

http://www.nimblehost.com/themetest/

jehead
02-13-2009, 11:15 AM
Still working on this, but haven't found a solution so far. Has anyone come across something similar before?

abduraooft
02-13-2009, 11:21 AM
As to be expected, the only browsers having difficulty displaying this correctly are IE6/7. Here's the relevant html code and css:



<div id="subMenu">
<ul><li><a id="current" rel="self" href="index.html">Home</a></li><li><a rel="self" href="page2/page2.html">Styled Text</a></li><li><a rel="self" href="page9/page9.html">Blog</a></li><li><a rel="self" href="page10/page10.php">Contact Form</a></li><li><a rel="self" href="page11/page11.html">File Sharing</a></li><li><a rel="self" href="page12/page12.html">Movie Album</a></li><li><a rel="self" href="page13/page13.html">Photo Album</a></li><li><a rel="self" href="page17/page17.html">Menu Test</a></li></ul>
</div> All that I see in your site is a black(added by the background of its parent element) strip for the above code, as you have

#subMenu li a {/*styles.css (line 123)*/
display:none;
} in your CSS.
Still doing research to see the issue, not the cause :)

jehead
02-13-2009, 02:36 PM
I've viewed the site on two separate machines, one with IE6, the other with IE7 - both can display the submenu (not just the strip of black), so I'm assuming the code is fine as is. If it needs to be changed to be viewed this also worked for me:



#submenu ul li a {display:none;}


Thanks, abduraooft, for taking a look at this~

jerry62704
02-13-2009, 03:30 PM
Your menu is centered in both IE6 and in FF3. I don't see why the spacing is different. Sorry.

BTW, you are probably chaning the menu with your javascript which would cause people without it active to see it differently. Is there anything in js to affect the menu?

abduraooft
02-13-2009, 03:32 PM
Your menu is centered in both IE6 and in FF3. I don't see why the spacing is different. Sorry.
Could you see the menu inside #submenu? (Not the one on the top, #mainmenu)

jerry62704
02-13-2009, 04:41 PM
Nope, as you already pointed out he has hidden them. They are vertical so they are extending outside the black box. If they were not hidden they would show, but apparently he wants to hide them. That's why I asked if he were doing something in javascript like unhiding them if you mouse over one of the top menu items for example.

jehead
02-14-2009, 01:46 AM
Nope, as you already pointed out he has hidden them.

Just for clarification, in the submenu I'm only hiding the parent (main menu) items, and child menu items of the submenu.


They are vertical so they are extending outside the black box. If they were not hidden they would show, but apparently he wants to hide them. That's why I asked if he were doing something in javascript like unhiding them if you mouse over one of the top menu items for example.

There's nothing in the javascript that references navigation in any way. For extra clarification I'm attaching screenshots of what I'm referring to exactly.

http://www.nimblehost.com/themetest/IE6screenshots.png

As you can see, in the second (middle) screenshot the submenu links are ~5px lower than in the first, and lower again in the third (bottom) screenshot.

abduraooft
02-14-2009, 07:20 AM
You have

#submenu ul ul li {
display: block; line-height: 20px; padding-top: 5px;
} in ie.css, removing that padding makes it OK in IE

PS: Avoid use of IE specific external stylesheets AFAP. You could easily use the * html selector hack in your main CSS file, for smaller versions of IE, if it's required.


* html #submenu ul ul li{
display: block; line-height: 20px;
}

jehead
02-14-2009, 10:00 AM
You have

#submenu ul ul li {
display: block; line-height: 20px; padding-top: 5px;
} in ie.css, removing that padding makes it OK in IE


Thanks for your input - I removed the padding as you suggested, but that doesn't fix the problem. I've checked from various machines, and still have the same issue - the only difference being the first set of links in the submenu (as viewed from the "Styled Text" page) is displayed 5px higher initially.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum