SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [ie7] css drop down menu with floats

    Hi everyone.

    I'm trying to figure out what's wrong in ie7; it must be some type of bug because all other major browsers I have tested in it works. Maybe something with the floats? I would appreciate it if a css master can explain whats going on! Thanks.
    Code CSS:
    <style type="text/css">
    *{padding:0; margin:0;}
     
    ul{list-style:none;}
     
    #nav li ul{background:red;}
    #nav li{float:left; margin:5px;}
     
    #nav li *{float:none;}
    #nav li:hover ul{display:block; position:absolute;}
    #nav li ul{display:none;}
     
    p{clear:left;}
    </style>
    Code HTML4Strict:
    <ul id="nav">
    	<li>Items Menu 1
    		<ul>
    			<li>Item 1</li>
    			<li>Item 2</li>
    			<li>Item 3</li>	
    		</ul>
    	</li>
    	<li>Items Menu 2
    		<ul>
    			<li>Item 1</li>
    			<li>Item 2</li>
    			<li>Item 3</li>	
    		</ul>
    	</li>
    </ul>
    <p>somestuff</p>
    Oh and I forgot to tell you guys I don't want to be pointed to a suckerfish menu, I wanted to try to see if I could create my own. Thanks again!

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The unordered list that appears after you hover over the primary list item is absolutely positioned, however the top/left/right/bottom are still `auto` and I believe it varies cross-browser.

    To make it more consistent, you should set position:relative on the primary list item and then set top and left values for the ul inside.

    Example below

    http://www.soulscratch.com/playgroun...dropdowns.html

    I would suggest also not using display:none since screen readers wont read out the list items in the nested ul.

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, thanks but I'm not so sure I like the idea of setting it to an absolute height.

    What if the user changes the font-size? What if the author wants to change margins, padding, height, or anything else?

    Do you see the problem SoulScratch? I think I need to find a way that's slightly more robust.

    Quote Originally Posted by SoulScratch
    The unordered list that appears after you hover over the primary list item is absolutely positioned, however the top/left/right/bottom are still `auto` and I believe it varies cross-browser.
    Interesting. I thought when left at auto the absolutely positioned element would be placed in the normal flow of the document? Stupid ie!

    Thanks and keep the suggestions coming!

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Huh? You don't have to have a fixed height.

  5. #5
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I'm sorry, maybe I wasn't clear.
    Quote Originally Posted by Tim913323
    Hmm, thanks but I'm not so sure I like the idea of setting it to an absolute height.
    By this I mean setting the top property to a value to something other than auto as this will remove it from the flow of the document.

    You can try increasing the text size of the document and then you maybe you'll see my problem.

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh. Any element that has a position other than static or relative is removed from the flow of the document, even if the top/left/bottom/right values are auto (on any browser).

    If you aren't working in a "pixel perfect" environment then you should just replace pixels with ems and everything will adjust.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The main problem was that you needed to add clear left to the floats in the sublist. You need to set a top and left position for IE otherwise the position will depend on the text alignment and other factors and will vary between browser.

    You also need to set position:relative on the parent list as already stated or the element will be placed from the viewport which won't be where you want.

    Here's a quick revamp.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{padding:0; margin:0;}
     
    ul{list-style:none;}
    #nav li{position:relative;} 
    #nav li ul{
        background:red;
        margin-left:-999em;
        position:absolute;
        top:1em;
        left:0;
    }
    #nav li{
        float:left; 
        margin:5px;
    }
    #nav li li{
        clear:left;
        white-space:nowrap;
        padding:0 5px
    } 
    #nav li:hover ul{
        margin-left:0;
    }
     
    p{clear:left;}
    </style>
    </head>
    <body>
    <ul id="nav">
        <li>Items Menu 1
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </li>
        <li>Items Menu 2
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </li>
    </ul>
    <p>somestuff</p>
    </body>
    </html>
    I used a negative margin-left to hide the nested list and then just set it back to zero to show the element when required. The top position is set in ems and will scale if the text is resized.

    You should always be careful to keep the sub list in contact with the main list or you will loose focus on the submenu and it will disappear.

    Hope that helps


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
  •