sab17 Posted October 13, 2009 Share Posted October 13, 2009 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.