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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.
sailingfree

sailingfree

Programmer
Sep 13, 2006
32
GB
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:


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>
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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!

 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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;
}
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
395
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
316
PeDa
PeDa
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
417
PeDa
PeDa
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
449
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
798
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top