Suckerfish Menu - third/fourth level display issue in IE 1

sailingfree · Sep 20, 2006

Hi

I'm just starting to get my head around the suckerfish menu and I'm aiming for a multi-level solution. So far I have managed to get it to work effectively in FF but not IE. The problem is that the third and fourth levels are displaying without the rollover.

Here is an example of what I have done so far:

http://www.spannerheadz.com/newftb/testmenu/testmenu.html

Ignore the formatting, just take a look at the last menu entry that says 'Esper'. You'll see what I mean. I suspect it may be something to do with the JS as I'm sure I've set the child level properties to the correct positioning to hide them.

Any help would be greatly appreciated!

Here's the complete code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xml:lang="en">

<head>
<title>suckerfish experiment</title>

<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

body {
	font-family: arial, helvetica, serif;
	font-size: 80%;
	background: white url(ddbg3.gif) no-repeat 6000px 6000px;
	padding: 2em;
	margin: 0;
}

#content {
	width: 760PX;
	background-color: #f4ecd9;
	padding: 1em 0;
	border: 6px double #7d6340;
	margin: auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 32em;
}
#content {
	width: 765PX;
} 

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #790;
}

a:active {
	color: red;
}

a:hover {
	text-decoration: underline;
}

h1 {
	text-align: center;
	padding: 0 0 0.25em 0;
	margin: 0;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav a {
	display: block;
	width: 8em;
	w\idth: 6em;
	color: #7C6240;
	text-decoration: none;
	padding: 0.25em 2em;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 10px;
}

/* ROLLOVER (TWO SIDE STRIPS) PROPERTIES */
#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #6190B4;
	border-width: 0 5px;
}

/* TOP LEVEL LIST - CAN ADD INDIVIDUAL ONES FOR EACH TOP MENU ENTRY*/
li {
	float: left;
	position: relative;
	width: 10em;
	text-align: LEFT;
	cursor: default;
	background-color: white;
	border: 1px solid #6190B4;
	border-width: 1px 0;
}

li#first {
	border-left-width: 1em;
	background-image:url(home.gif);
	width:100px;
	height:25px;
}

li#last {
	border-right-width: 1em;
}

/* SECOND LEVEL LIST*/
li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	background: url(ddbg3.gif) bottom left no-repeat;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px #6190B4;
	border-top: solid 1px #6190B4;
}

/* RESETS FOR NON IE BROWSERS */
li>ul {
	top: auto;
	left: auto;
}

/* POSITIONS THIRD LEVEL TO THE SECOND*/
#nav li ul ul {
	margin: -1em 0 0 10em;
}


/* POSITIONS DROP DOWN IN LINE WITH LIST ITEM*/
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none; 
	line-height: 1;
}


li li {
	display: block;
	float: none;
	background-color: transparent;
	border: 0;
}

/* MAKES THE SECOND LEVEL APPEAR WITH ROLLOVER*/
li:hover ul, li.over ul {
	display: block;
}

/* HIDES THIRDS LEVEL */
#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}

/* SHOWS THIRD LEVEL*/
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
	left: auto;
}

/* HIDES FORTH LEVEL */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

/* SHOWS FORTH LEVEL*/
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}


hr {
	display: none;
}

p {
	clear: left;
	background: url(remora.gif) center left no-repeat;
	padding: 1em 1em 0 1em;
	margin: 0;
}

p.image {
	float: right;
	font-size: 0.8em;
	text-align: center;
	color: #7d6340;
	padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
	display: block;
	border: 1px solid #7d6340;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<div id="content">



<hr />

<ul id="nav">
  	<li id="first"><br /><br />
		<div><a href=""></a></div>
		<ul>

			<li><img src="remora4.gif" width="100" height="27" alt="Remora" /></li>
			<li><a href="">Classification</a></li>
			<li><a href="">Physcial Characteristics</a></li>
			<li><a href="">Habitat</a></li>
			<li><a href="">Lifestyle</a></li>
			<li><a href="">Evolution</a></li>

			<li><a href="">Distribution</a></li>
			<br>
		</ul>
	</li>

	<li id="first">
		<div><a href="">Overview</a></div>
		<ul>

			<li><img src="remora4.gif" width="100" height="27" alt="Remora" /></li>
			<li><a href="">Classification</a></li>
			<li><a href="">Physcial Characteristics</a></li>
			<li><a href="">Habitat</a></li>
			<li><a href="">Lifestyle</a></li>
			<li><a href="">Evolution</a></li>

			<li><a href="">Distribution</a></li>
			<br>
		</ul>
	</li>

	<li>
		<div><a href="">Species</a></div>
		<ul>
			<li><a href="">Ceylonese remora</a></li>

			<li><a href="">Remora remora</a></li>
			<li><a href="">Sharksucker</a></li>
			<li><a href="">Slender remora</a></li>
			<li><a href="">Spearfish remora</a></li>
			<li><a href="">Whitefin sharksucker</a></li>
			<li><img src="images/remora6.gif" width="59" height="80" alt="The top of a remoras head" /></li>

		</ul>
	</li>

	<li id="last">
		<div><a href="">Links</a></div>
		<ul>
			<li><a href="[URL unfurl="true"]http://www.itis.usda.gov/servlet/SingleRpt/SingleRpt?amp;search_topic=TSN&amp;search_value=168567">Remoras[/URL] at ITIS</a></li>
			<li><a href="[URL unfurl="true"]http://animaldiversity.ummz.umich.edu/accounts/remora/r._remora.html">Remora[/URL] remora at ADW</a></li>

			<li><a href="[URL unfurl="true"]http://www.oceanlight.com/html/remora_sp.html">Phillip[/URL] Colla photographs</a></li>
			<li><img src="images/remora3.gif" width="100" height="35" alt="Remora" /></li>
			<li><a href="[URL unfurl="true"]http://www.amonline.net.au/fishes/fishfacts/fish/enaucrates.htm">Slender[/URL] suckerfish at Australian Museum Online</a></li>
			<li><a href="[URL unfurl="true"]http://www.colzoo.org/animalareas/shores/remora.html">Remora[/URL] at Columbus Zoo</a></li>

		</ul>
	</li>
	<li ID="LAST">
	  <DIV>eSPER</DIV>
    <ul>			
      <li><a href="#" class="daddy">Log - Esper</a>
        <ul>
          <li><a href="#">Ramprasad</a>
            <ul>
              <li><a href="#">UK</a></li>
			  <li><a href="#">Channel Islands</a></li>
			  <li><a href="#">France</a></li>
			</ul>
		  </li>
          <li><a href="#">Phtheirichthys</a>
		    <ul>
		      <li><a href="#">Slender Suckerfish</a></li>
			</ul>
		  </li>
		  <li><a href="#">Remora</a>
		    <ul>
			  <li><a href="#">Whalesucker</a></li>
			  <li><a href="#">Spearfish remora</a></li>
			  <li><a href="#">Marlinsucker</a></li>
			  <li><a href="#">Remora</a></li>
			  <li><a href="#">Ceylonese remora</a></li>
			</ul>
		  </li>
		  <li><a href="#">Remorina</a>
		    <ul>
			  <li><a href="#">White suckerfish</a></li>
			</ul>
		  </li>
		  <li><a href="#">Rhombochirus</a>
            <ul>
			  <li><a href="#">R. osteochir</a></li>
			</ul>
		  </li>
		</ul>
	  </li>
      <li><a href="#" class="daddy">Log - Other Boats</a>
        <ul>
          <li><a href="#">Ramprasad</a>
            <ul>
              <li><a href="#">UK</a></li>
			  <li><a href="#">Channel Islands</a></li>
			  <li><a href="#">France</a></li>
			</ul>
		  </li>
          <li><a href="#">Phtheirichthys</a>
		    <ul>
		      <li><a href="#">Slender Suckerfish</a></li>
			</ul>
		  </li>
		  <li><a href="#">Remora</a>
		    <ul>
			  <li><a href="#">Whalesucker</a></li>
			  <li><a href="#">Spearfish remora</a></li>
			  <li><a href="#">Marlinsucker</a></li>
			  <li><a href="#">Remora</a></li>
			  <li><a href="#">Ceylonese remora</a></li>
			</ul>
		  </li>
		  <li><a href="#">Remorina</a>
		    <ul>
			  <li><a href="#">White suckerfish</a></li>
			</ul>
		  </li>
		  <li><a href="#">Rhombochirus</a>
            <ul>
			  <li><a href="#">R. osteochir</a></li>
			</ul>
		  </li>
		</ul>
	  </li>
	  <li><a href="#">Interactive chart</a>
	  </li>
	  	  <li><a href="#">Postcards</a>
	  </li>
    </ul>
  </li>

</ul>

<hr />

</div>

</body>

</html>

sailingfree · Sep 20, 2006

Don't think I can edit this post, can I?

Please ignore this for the time being as I have solved this problem but created another one!

Will be posting again shortly, no doubt.

sailingfree · Sep 20, 2006

OK, so here's the problem. Menu works fine in both IE and FF except when in FF my little vertical roll-overs are not placed correctly - the one on the right is outside the box. In IE they are both perfectly placed.

Please see this link for an example and check the page source code for all code - it's not half as big as the code above!

http://www.spannerheadz.com/newftb/testmenu/testmenu2.html

Vragabond · Sep 20, 2006

Look at your css -- your nested lists are 10em wide and your links are 10em wide and have an additional padding of 10px on each side. That makes links too wide for their container and here's the inherent difference between the browsers:

IE just enlarges the container to fit the enlarged child -- this is an incorrect behaviour.
Other browsers let the bigger child hang over the smaller parent -- this is what standard describe should happen.

How to fix it? Give your links padding (and any borders and margin) em units, then count it all up and make the ul as wide as the sum of their width, paddings, margins and borders.

sailingfree · Sep 21, 2006

Once again Vragabond solves the case! Thank you. A fresh pair of eyes, and all that.....

I guess this came about through hashing and rehashing two different versions of Suckerfish. My original problem was that I used an earlier version, so if anyone is wanting to use the Suckerfish, make sure you get the latest version.

sailingfree · Sep 21, 2006

Hi Vragabond,

Is there a simple formula for this? At the moment I have combinations of px and ems, which is confusing me, especially as I'm new to ems (as you know from my previous post the other day). How do I convert 5px, for example, to ems?

Code:

#nav a {
	display: block;
	width: 10em;
	text-decoration: none;	
}

/* TOP LEVEL MENU ITEM */
#nav li { 
	float: left;
	position: relative;
	width: 10em;
	text-align: LEFT;
	cursor: default;
		
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 10px;
}

/* ROLLOVER (TWO SIDE STRIPS) PROPERTIES */
#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #6190B4;
	border-width: 0 5px;
}


#nav li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	background: url(ddbg3.gif) bottom left no-repeat;
	padding: 0.5em 0 1em 0;
	border-right: solid 1px #6190B4;
	border-top: solid 1px #6190B4;
}

sailingfree · Sep 21, 2006

Does taking the pixel size and converting by 10 do the trick? Do I need to define my font size in my body tag first?

Vragabond · Sep 21, 2006

I would suggest you try it out a little bit to see what fits best. If you want, you can use this calculator as a reference -- it will calculate the correct em value based on what pixels you want. Take note (you can see by playing with the calculator) that em is always relative to the font size in the parent container.

sailingfree · Sep 22, 2006

Thanks for the link.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Suckerfish Menu - third/fourth level display issue in IE 1

sailingfree

Programmer

sailingfree

Programmer

sailingfree

Programmer

Vragabond

Programmer

sailingfree

Programmer

sailingfree

Programmer

sailingfree

Programmer

Vragabond

Programmer

sailingfree

Programmer

Similar threads

Part and Inventory Search

Sponsor