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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer IE6/7 adding vertical indent to horizontal <ul> menu

    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

    Code:
    <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)

    Code:
    #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)

    Code:
    #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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Code:
    * {
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator, thanks for your suggestion - I already have such a declaration at the top of my stylesheet though

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wasn't sure if posting a link here was kosher, but since you ask

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

  • #6
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still working on this, but haven't found a solution so far. Has anyone come across something similar before?

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    As to be expected, the only browsers having difficulty displaying this correctly are IE6/7. Here's the relevant html code and css:
    Code:
    <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
    Code:
    #subMenu li a {/*styles.css (line 123)*/
    display:none;
    }
    in your CSS.
    Still doing research to see the issue, not the cause
    Last edited by abduraooft; 02-13-2009 at 11:25 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    #submenu ul li a {display:none;}
    Thanks, abduraooft, for taking a look at this~

  • #9
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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?
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by jerry62704 View Post
    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)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #12
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jerry62704 View Post
    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.

    Quote Originally Posted by jerry62704 View Post
    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.



    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.

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You have
    Code:
    #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.

    Code:
    * html #submenu ul ul li{
    display: block; line-height: 20px; 
    }
    Last edited by abduraooft; 02-14-2009 at 07:23 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    You have
    Code:
    #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.


  •  

    Tags for this Thread

    Posting Permissions

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