Drop Down Menu odd in IE 8

HTML & CSS
1

Hi from soon to be on holiday for two weeks in Crete wakefield UK :slight_smile:

On this page illustrated above:
http://www.pauserefreshment.co.uk/3_column_tutorial.html
Ive made alot of progress with a drop down menu courtesy of a Suckerfish Dropdomw solution however the drop down works as I want in firefox but not in IE8 :frowning:

Heres the offending code:

<!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" />
<meta name="robots" value="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="css/tutorial.css" />
<title>3 column layout tutorial</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
 
sfHover = function() {
	var sfEls = document.getElementById("nav").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 id="tutorial" onload="alert('This is my 3 column css tutorial');">
<div id="wrapper3column">
  <div id="header3">
    <div class="ne">

      <div class="nw">
        <h1>Header</h1>
      </div>
    </div>
  </div>
  <div id="nav">
    <ul>
      <li><a href="#" id="current" title="Home">Home</a>

        <ul>
          <li><a href="#">Remoras</a></li>
          <li><a href="#">Tilefishes</a></li>
          <li><a href="#">Bluefishes</a></li>
          <li><a href="#">Tigerfishes</a></li>
        </ul>
      </li>

      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">News</a></li>
    </ul>
  </div>
  <div id="columnleft3">
    <p>TEST column left TEST column left TEST column left TEST column left TEST column left </p>

  </div>
  <div id="columnmain3">
    <p>TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column centralTEST column central TEST column central TEST column central TEST column central</p>
  </div>
  <div id="columnright3">
    <div class="sw">
      <div class="se">
        <div class="ne">

          <div class="nw">
            <p>TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right.
          </div>
        </div>
      </div>
    </div>
    </p>
  </div>
  <div id="footer3">

    <div class="sw">
      <div class="se">
        <p>Footer</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

//////////////

/* 3 column css starts*/
#tutorial {
background:orange url(../images/lplate.jpg) repeat fixed 0% 50px;
}
#header3 h1 {
color:#FFFFFF;
}

#header3 .ne {
background: url(../images/curves/ne.jpg) 100% 0 no-repeat; 
}

#header3 .nw {
background: url(../images/curves/nw.jpg) 0 0 no-repeat; 
}

#columnleft3 {
width:267px;
float:left;
background:#CC00CC;
}

#columnleft3 p {
}

#columnmain3 {
width:267px;
float:left;
background:yellow;
}

#columnmain3 p {
font-family:Arial, Helvetica, sans-serif;
}

#columnright3 {
width:267px;
float:left;
background:#990066;
font-family:monospace;
height:px;
}

#columnright3 p{
padding:0px 15px 0px 15px;
margin:0px;
}

#columnright3 .sw {
background: url(../images/curves/sw.jpg) 0 100% no-repeat; 
}

#columnright3 .se {
background: url(../images/curves/se_3.jpg) 100% 100% no-repeat; 
}

#columnright3 .ne {
background: url(../images/curves/ne.jpg) 100% 0 no-repeat; 
}

#columnright3 .nw {
background: url(../images/curves/nw.jpg) 0 0 no-repeat;
}


#columnright3 p {
}

#wrapper3column {
width:801px;
background: url(../images/faux_column2.jpg) repeat-y 50% 0;
margin-left:auto;
margin-right:auto;
}

#footer3 {
height:20px;
background:#00CC99;
clear:both;
}

#footer3 .sw {
background: url(../images/curves/sw.jpg) 0 100% no-repeat; 
}

#footer3 .se {
background: url(../images/curves/se_3.jpg) 100% 100% no-repeat; 
}


/*Navigation start*/

#nav ul li{
display: inline;
list-style: none;
margin: 0;
}

#nav ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 30px Veranda, sans-serif;
background:#FF0000;
margin-bottom:0px;
}

#nav ul li a {
padding: 3px 0.5em;
margin-left: 10px;
border: 3px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#nav ul li a:link {
color: #448;
}

#nav ul li a:link:hover, #nav ul li a:visited:hover {
color: #000;
background: #aae;
border-color: #227;
}

#nav ul li a#current {
background: white;
border-bottom: 1px solid white;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

/*Drop down css */
#nav li ul {
    position: absolute;
    width: 5em;
    left: -999em;
	clear: left;
	}
	
#nav li:hover ul {
    left: auto;
}

/*Drop down css ends */

/*Navigation end*/
/* 3 column css ends*/

So my question is please, "How can i get the drop down menu when you hover over the home tab to drop down directly below as it does in firefox 3.5.11?

Any insights welcome :slight_smile:

2

Hi Steve & thank you for your reply :slight_smile:

yes I had it in compatability mode so I guess theres no problem right? But regarding the display block. If I cahnged the below code to display:block then the whole horizontal layout gets trashed which I dont want. Maybe you mena to add display:block somewhere else.

#nav ul li{
display: inline;
list-style: none;
margin: 0;
}

It looks like theres no prob here but I aint got any authority to know that.

off topic: The whole faux column stuff is best ignored unless you want to enter my mystical and dodgy understanding of CSS :wink:

3

It works fine in IE8, unless you turn “compatibility mode” on, which probably means that it will behave in IE7 as you’re seeing here.

It’s even worse in Opera…

One thing that might be causing a problem is the “display:inline;”. Inline means they follow along from each other. Block means they go one above the other, and that’s what you want here.

And a couple of other things…

  • You’ve got a reference to “font-family:veranda” - did you mean verdana?
  • Your background says “faux columns 2” all the way across it, but (a) you’ve got three columns, and (b) you aren’t using faux columns. Are you just trying to confuse us? :smiley:
4

Hi,

It’s broken in IE7 because of the auto position that the suckerfish menu uses. I’m surprised that after all these years they haven’t changed it as its a big bug in IE that we see about twice a week in the forums.

For IE you need to set left:0 and not left:auto and than means the parent list must be position:relative to create the stacking context. Otherwise IE doesn’t know where auto is and will place it depending n text-alignment.


[B]#nav li{position:relative}
#nav li:hover{z-index:99}[/B]
/*Drop down css */
#nav li ul {
    position: absolute;
    width: 5em;
    left: -999em;
    clear: left;
}
#nav li:hover ul {
[B]    left:0;[/B]
}
[B]*+html #nav li ul{top:1.4em}
* html #nav li ul{top:1.4em}[/B]
/*Drop down css ends */