SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,059
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Submenu margin fix?

    I have a submenu using the following CSS:
    Code CSS:
    #menu li ul {
    	width: 0; 
    	height: 0; 
    	margin: 0; 
    	padding: 0;	
    	position:absolute; 
    	left: -9999px; 
    	top: -9999px; 
    }
     
    #menu li:hover ul {
    	width: 173px;
    	height: auto;
    	left: 0; 
    	top: 20px; 
    	background: url(../images/site/sub_bg.png);
    	border: 1px solid #FFF; 
    	white-space: nowrap;
    	overflow: hidden;	
    }

    This works fine in all browsers (FF, Chrome, Opera, Safari), but IE. Somehow it looks like there is some margin between the <li> and the <ul>, because when I want to roll over the submenu in IE it disappears. When I use top: 18px it works in IE but in all other browsers the submenu is moving under the <li>. Is there a special fix for IE to solve this?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'd need to see the whole page but IE needs the submenu to remain in contact with the top menu or the hover loses focus as you traverse from one to the other. Make sure the parent list is at least 20px high or you will be placing the submenu too far away.

    Have you floated the top level as that usually kills whitespace bugs?

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,059
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, All that you mentioned is applied. Height, float etc. Sorry that i didn't show the parent <li> and anchor. Here they are:
    Code CSS:
    #menu li {
    	float: left;
    	height: 20px;
    	line-height: 20px;
    	position: relative;
    }
     
    #header #menu li a {
    	height: 20px;
    	line-height: 20px;	
    	padding: 0 14px;
    	display: block;
    	color: #FFF;
    	text-decoration: none;
    	text-transform: uppercase;
    }
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    There must be something else causing the issue because the above is working fine for me in IE.

    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body{background:#ccc;}
    ul{margin:0;padding:0;list-style:none}
    
    #menu li {
        float: left;
        height: 20px;
        line-height: 20px;
        position: relative;
    }
    #menu li a {
        height: 20px;
        line-height: 20px;
        padding: 0 14px;
        display: block;
        color: #FFF;
        text-decoration: none;
        text-transform: uppercase;
    }
    #menu li ul {
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        position:absolute;
        left: -9999px;
        top: -9999px;
    }
    #menu li:hover ul {
        width: 173px;
        height: auto;
        left: 0;
        top: 20px;
        background: url(../images/site/sub_bg.png);
        border: 1px solid #FFF;
        white-space: nowrap;
        overflow: hidden;
    }
    </style>
    </head>
    <body>
    <ul id="menu">
        <li><a href="#">Test 1</a>
            <ul>
                <li><a href="#">Submneu</a></li>
                <li><a href="#">Submneu</a></li>
                <li><a href="#">Submneu</a></li>
                <li><a href="#">Submneu</a></li>
            </ul>
        </li>
        <li><a href="#">Test 2</a>
            <ul>
                <li><a href="#">Submneu</a></li>
                <li><a href="#">Submneu</a></li>
                <li><a href="#">Submneu</a></li>
                <li><a href="#">Submneu</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    I couldn't check IE6 as you didn't add any js.

    Can you run up a working demo so we can see the problem live ?


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
  •