Jump to content

Drop Down Menu Vertical Position Offset In Ie


sab17
 Share

Recommended Posts

I have a horizontal menu with drop down menus that worked fine until I added a rollover feature to the buttons. I'm now using a gif for the background url (instead of using just an img) - and changing its position vertically when the link is hovered to show the other button. The rollover works fine but its the drop down menu's position that's offset in IE. It's fine in ff but IE shows the drop down menu about 7px too low so it's hard to even go to and click the buttons on the drop down menu. I'm guessing IE just handles background url's different when it comes to the drop down positioning and am not familiar with exactly how to fix it. If I do margin-top: -7px, it'll be fine in IE but then firefox of course will be positioned too high...CSS

#container{	width: 950px;	}#banner {	float: left;	width: 950px;	line-height:0px;	height:310px;	}#menu	{	height:26px;	}#menu ul{	list-style: none;	margin: 0;	padding: 0;			float: left;	line-height:0px;	}#menu a {	display: block;	color: black;	text-decoration: none;	}#menu ul ul	{	font: bold 12px georgia;	line-height:20px;	border-width:thin medium medium;	border-style: solid;	border-color: #deb76a;	margin: 0;	color:black;	text-decoration:none;	background-color:white;	}#menu li ul {	position: absolute;	width: 120px;	left: -999em;	}#menu li:hover ul {	left: auto;	}#menu li:hover, #menu li.sfhover {	left: auto;	background: #f6e1b6;	}li li a:hover {	margin-left:7px;	}#home{  width: 100px;  height: 26px;  background: url("menu/home2.gif") no-repeat 0 0;}#sales{  width: 100px;  height: 26px;  background: url("menu/sales2.gif") no-repeat 0 0;}#boarding{  width: 135px;  height: 26px;  background: url("menu/boarding.gif") no-repeat 0 0;}#services{  width: 129px;  height: 26px;  background: url("menu/services.gif") no-repeat 0 0;}#programs{  width: 132px;  height: 26px;  background: url("menu/programs.gif") no-repeat 0 0;}#events{  width: 109px;  height: 26px;  background: url("menu/events.gif") no-repeat 0 0;}#forums{  width: 109px;  height: 26px;  background: url("menu/forums.gif") no-repeat 0 0;}#myaccount{  width: 136px;  height: 26px;  background: url("menu/myaccount.gif") no-repeat 0 0;}#menu ul li a:hover{   background-position: 0 -26px;}#bottom {	float: left;	width: 950px;	line-height:0px;	z-index:-1;	height:14px;	}

HTML

<!DOCTYPE html PUBLIC"-//W3C//Dtd Xhtml 1.0 Transitional//EN""http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<link rel="stylesheet" href="style.css" type="text/css" /><title>banner</title><script type="text/javascript"><!--//--><![CDATA[//><!--sfHover = function() {	var sfEls = document.getElementById("menu").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) {		sfEls[i].onmouseover=function() {			this.className+=" sfhover";		}		sfEls[i].onmouseout=function() {			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");		}	}}if (window.attachEvent) window.attachEvent("onload", sfHover);//--><!]]></script></head><body><div id="container">	<div id="banner">		<img src="menu/banner.gif" width="950" height="310" alt="">	</div>	<div id="menu">		<ul id="menu1">			<li><a href="index.html" id="home"> </a>			</li>		</ul>		<ul>			<li><a href="sales.html" id="sales"> </a>				<ul>					<li> For blank:</li>					<li><a href="horse.html">   blank</a></li>					<li><a href="horse.html">   blank</a></li>					<li><a href="horse.html">   blank</a></li>					<li> For blank:</li>					<li><a href="horse.html">   blank</a></li>					<li><a href="horse.html">   blank</a></li>					<li> For blank:</li>					<li><a href="horse.html">   blank</a></li>					<li><a href="horse.html">   blank</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="boarding.html" id="boarding"> </a>			</li>		</ul>		<ul>			<li><a href="services.html" id="services"> </a>				<ul>					<li><a href="services.html"> blank</a></li>					<li><a href="services.html"> blank</a></li>					<li><a href="services.html"> blank</a></li>					<li><a href="services.html"> blank</a></li>					<li><a href="services.html"> blank</a></li>					<li><a href="services.html"> blank</a></li>					<li><a href="services.html"> blank</a></li>					<li><a href="services.html"> blank</a></li>					<li><a href="services.html"> blank</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="index.html" id="programs"> </a>				<ul>					<li><a href="services.html"> blank</a></li>					<li><a href="services.html"> blank</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="index.html" id="events"> </a>				<ul>					<li><a href="events.html"> blank</a></li>					<li><a href="events.html"> blank</a></li>					<li><a href="events.html"> blank</a></li>					<li><a href="events.html"> blank</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="index.html" id="forums"> </a>			</li>		</ul>		<ul>			<li><a href="index.html" id="myaccount"> </a>			</li>		</ul>	</div>	<div id="bottom">		<img src="menu/menu_11.gif" width="950" height="14" alt="">	</div></div></body></html>

Any help would be much appreciated!EDIT 10/13I finally found the problem!! I just took out line-height:0px under the css #menu ul and it fixed IE. I had originally put that in there because, if I remember correctly, I originally had divs splitting the buttons or the pictures up and there was a space in ff between the divs and setting the line height to 0 fixed it...if I'm remembering correctly.

Edited by sab17
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...