#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2007
    Posts
    24
    Rep Power
    0

    IE6 drop down menu not accepting width


    I'm using the suckerfish drop down method to get ie6 to work.

    For some reason, the drop down portion of the the menu pushes out to the right of its parent by about 26px.

    I have #menu li ul {width:213px}

    I've noticed that if I delete this width, Firefox and IE7 behave the same way as IE6 pushing the menu outside the parent and moving the elements of the page.

    I'm having to use position:relative; left:-36px; padding-left:10px to get the sub menu to line up in the first place.

    This all tells me that there is something forcing the sub menu to be wider than it should be, the difference being that in the later browsers, I can tell it to behave.

    Here's the menu stylesheet:

    Code:
    #menu {
    	width:860px;
    	height:80px;
    	position:relative; margin:auto;
    	border:solid 1px #000; border-bottom:none;
    	list-style:none;
    	z-index:6000;
    	}
    #menu ul {
    	list-style:none;
    	padding: 0;
    	margin: 0;
    	float:left;
    	}
    #menu li.help, #menu li.resources, #menu li.about, #menu li.apply {
    	margin: 0;
    	height:80px;
    	float:left;
    	list-style:none;
    	}
    #menu li.help a, #menu li.resources a, #menu li.about a, #menu li.apply a {
    	height:38px;
    	width:215px;
    	display:block;
    	padding:12px 0px 0 0px;
    	text-align:center;
    	color:#fff;
    	font-family:Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:18px;
    	font-variant:small-caps;
    	background:url(../images/navigation.jpg) no-repeat;
    	}
    #menu li.apply a {
    	background:url(../images/navigation.jpg) -645px 0 no-repeat;
    	height:0; 
    	overflow:hidden;
    	padding-top:80px;
    	}
    #menu li.help a:hover, #menu li.resources a:hover, #menu li.about a:hover, #menu li.apply a:hover {
    	text-decoration:none;
    	height:38px;
    	background:url(../images/navigation-hl.jpg) no-repeat;
    	font-variant:small-caps;
    	}
    #menu li.apply a:hover {
    	background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
    	height:0; 
    	overflow:hidden;
    	padding-top:80px;
    	}
    body.he #menu li.help a, body.re #menu li.resources a, body.ab #menu li.about a, body.ap #menu li.apply a	{
    	background:url(../images/navigation-hl.jpg) no-repeat;
    	}
    body.ap #menu li.apply a {
    	background:url(../images/navigation-hl.jpg) -645px 0 no-repeat;
    	}
    	
    
    
    #menu li ul {
    	width:213px;
    	display: none;
    	z-index:7000;
    	border:solid 1px #000; border-top:none;
    	background:#bbbcef;
    	}
    #menu li.help ul li a, #menu li.resources ul li a, #menu li.about ul li a, #menu li.apply ul li a{
    	background-image:none;
    	color:#333;
    	border-bottom:solid 1px #999;
    	padding:5px 0 5px 10px;
    	font-size:12px;
    	height:auto;
    	margin:0;
    	text-align:left;
    	position:relative; left:-36px;
    	width:203px;
    	}
    #menu li.help ul li a:hover, #menu li.resources ul li a:hover, #menu li.about ul li a:hover, #menu li.apply ul li a:hover {
    	background:#ffeecd; background-image:none;
    	color:#000;
    	border-bottom:solid 1px #999;
    	padding:5px 0 5px 10px;
    	font-size:12px;
    	height:auto;
    	position:relative; left:-36px;
    	width:203px;
    	}
    #menu li.help:hover ul, #menu li.resources:hover ul, #menu li.about:hover ul, #menu li.over ul { 
    	display: block; 
    	}
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    That seems to be caused by the relative positioning on the <a>s in the sub-menu.

    I suggest you read up on how relative positioning works.

    I'd probably give "#menu li ul" a negative left margin.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo