CSS drop menu offset in IE7

345 Posts

jbjones Reply #1, 18 years, 11 months ago

Does anyone know right offhand what I missed in the CSS for this drop menu. It appears to work great in FireFox, but in IE7 the menu is offset to the right of the top hover item.

345 Posts

jbjones Reply #2, 18 years, 11 months ago

Here is a sample HTML page with the CSS that I’m using.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<style type="text/css">
<!--
body {
	font-family: Arial, Helvetica, sans-serif;
}
#navcontainer {
	width: 100%;
	height: 24px;
	margin: 0 0 30px 0;
	padding: 0;
	background-color: #2f7ddc;
	background-image: url(../images/navlist-bg.png);
	background-repeat: repeat-x;
	background-position: bottom;
}

#navcontainer-left {
	float: left;
	width: 15px;
	height: 24px;
	background-color:#CC0000;
	background-image: url(../images/navlist-bg-left.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}

#navcontainer-right {
	float: right;
	width: 15px;
	height: 24px;
	background-color: #CC0000;
	background-image: url(../images/navlist-bg-right.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}

#navlist {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	list-style-image: none;
	list-style-position: outside;
}

#navlist li {
	float: left;
	position: relative;
	margin: 0px;
	padding: 0px;
}

#navlist a {
	float: left;
	display: block;
	text-decoration: none;
	color: #ffffff;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	line-height: normal;
	padding: 4px 8px 5px 8px;
}

#navlist a:hover {
	color: #0d5cab;
	text-decoration: none;
	background-color: #cccccc;
	background-image: url(../images/navlist-hover.png);
	background-repeat: repeat-x;
}

#navlist .here {
	font-weight: bold;
}

#navlist li ul {
	display: none;
	top: 0px;
	left: 0px;
	background-color: #eeeeee;
	background-image: none;
	margin-top: 24px;
	margin-left: 0px;
	padding-left: 0px;
	list-style-type: none;
	border-top: 1px solid #0d5cab;
	opacity: 0.9;
	position: absolute;
}

#navlist li ul li {
	border-left: 1px solid #0d5cab;
	border-bottom: 1px solid #0d5cab;
	border-right: 1px solid #0d5cab;
	background-color: #eeeeee;
}

#navlist li ul li a {
	display: block;
	width: 130px;
	margin-left: 0px;
	padding: 4px 4px 3px 5px;
	list-style-type: none;
	color: #0d5cab;
	background-color: #eeeeee;
}

#navlist li ul li a:hover {
	color: #ffffff;
	text-decoration: none;
	background-color: #0d5cab;
	background-image: none;
}

#navlist li > ul {
	top: auto;
	left: auto;
}

#navlist li:hover ul, #navlist li.over ul {
	display: block;
	background-color: #0d5cab;
	color: #ffffff;
	width: 141px;
}

-->
</style>

</head>

<body>
  <div id="navcontainer">
    <div id="navcontainer-left"></div>
    <div id="navcontainer-right"></div>
    <ul id="navlist">
      <li><a href="#" class="here">Home</a></li>
      <li><a href="#">Industry News</a>
        <ul>
          <li><a href="#">Cool Stuff</a></li>
          <li><a href="#">New Developments</a></li>
          <li><a href="#">Complete Stuff</a></li>
          <li><a href="#">A much longer text menu item.</a></li>
          <li><a href="#">More really cool stuff</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a>
        <ul>
          <li><a href="#">Service Stuff</a></li>
          <li><a href="#">Development Services</a></li>
          <li><a href="#">Complete Stuff</a></li>
          <li><a href="#">More cool services</a></li>
        </ul>
      </li>
      <li><a href="#">Resources</a>
        <ul>
          <li><a href="#">Test Stuff 1</a></li>
          <li><a href="#">More Testing Things</a></li>
          <li><a href="#">Item Test 3</a></li>
          <li><a href="#">A long Resource menu item.</a></li>
          <li><a href="#">Another longish menu item to test.</a></li>
          <li><a href="#">Item Test 6</a></li>
          <li><a href="#">A Resource menu item.</a></li>
          <li><a href="#">Number 8</a></li>
          <li><a href="#">Item Test 9</a></li>
          <li><a href="#">Menu item 10</a></li>
          <li><a href="#">Another menu item</a></li>
        </ul>
      </li>
      <li><a href="#">About Us</a>
        <ul>
          <li><a href="#">Not much here</a></li>
          <li><a href="#">Nothing Important</a></li>
        </ul>
      </li>
      <li><a href="#">Contact Us</a>
        <ul>
          <li><a href="#">Test 1</a></li>
          <li><a href="#">Test 2</a></li>
          <li><a href="#">Test 3</a></li>
        </ul>
      </li>
    </ul>
  </div>

</body>
</html>

345 Posts

jbjones Reply #3, 18 years, 11 months ago

Any one have an idea what I’m missing?

57 Posts

plavet Reply #4, 18 years, 11 months ago

Hi

You need this at the end of css :

#navlist li:hover ul, #navlist li.over ul {
        display: block;
	background-color: #0d5cab;
	color: #ffffff;
	width: 141px;

       clear: both;
       margin: 0;
}

But then again that will mess how it looks in Firefox, so you’ll need to put this into separate css file,and call it for IE only, what I do is, I have main.css and hack.css for things like this....so put your main css code out of your html to main.css,and this last piece of code with clear and margin values into hack.css for stupid IE wink

Hope it helps grin

345 Posts

jbjones Reply #5, 18 years, 11 months ago

Awesome. That seems to work perfectly. Thank you.

I think the last time I did a drop menu I was placing the hover call in a different tag which required some javascript to get IE working at all, but it allowed the CSS to remain identical between both browsers. This different method doesn’t require the Javascript, but then requires different CSS alignment for IE.

57 Posts

plavet Reply #6, 18 years, 11 months ago

Glad it worked grin

Yup,there is always something with IE rolleyes

I usually do either complete java, or css menu, not messing both at the same time for the sake of IE stupidity wink

though I prefer css, it’s soooo much better cool

, and with background images as PNG 8 ( supported even by IE6 shocked

) you could do amazing menus

Here’s a great web sites about css menus, I learn from this alot and always use them as reference

css.maxdesign.com.au/index.htm
www.cssplay.co.uk/menus/flyout2.html

Happy ModXing cool