Vertical CSS Menu inside a table cell

I'm sure I'm going to get the question "Why don't you just make the whole page CSS?" Without getting into a long explanation of the people who will eventually be maintining the site and their limited ability and tools.....

I have used Suckerfish's vertical menu inside a table cell (wrapping it within a div). The menu works beatifully in IE, but provides a LOOOOOONG list of ALL menu and sub-menu items in Netscape and FF.

Is there any way to make Suckerfish's vertical menu cross browser compliant (per se) inside a table cell and render the same in the other two browsers?

Thanks for any assistance ANYONE can provide. This has been such a pain.

 

Can u provide a link plz

 

Yup, sure can.

Here it is:

http://wildrivernet.com/_fw/index.htm

I should have sent the link initially, but many forums do not like people to include links.

Thanks SO much!

 

Hey, ok I only came across this suckerfish menu the other day myself so I can't edit that yet. HOWEVER...

I can give you a vertical menu code that I always use - its easy to include instead of the menu you have and its both FF and IE friendly - it'll work fine.
I'd advise you to test it in a new file first then edit it there, when you have it looking the way you want (colours, fonts etc) duplicate your current website (for safety sake) and then copy and paste this new menu in. It WILL work the way you want. You have the right idea, wrap it in a div and it'll be fine. It must be something up with that suckerfish menu - anyway, this'll work in both IE, FF and Netscape.

No worries

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
	
.suckerdiv ul li{
position: relative;
}
	
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: yellow;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}

	
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />[0].className="subfolderstyle"
		if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
			ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
		else //else if this is a sub level submenu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />[0].style.display="none"
    }
    }
		for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
		ultags[t].style.visibility="visible"
		ultags[t].style.display="none"
		}
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>

Code (markup):

And the html part:

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

Code (markup):

 

Thanks for your pompt rely Le007!

I did as you suggested (made a backup first) plugged in your code (although I didn't make style changes) and still have the same problem....

Did I do something wrong or miss something? I've uploaded the file to server under the same url.

 

I THINK its because you have 2 javascripts running - I had a similar problem before...

This is EXTREMELY unorthodox but it might work just for TESTING we'll say

Ok take this code out and place it DIRECTLY above the menu like so:

<script type="text/javascript">

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids).getElementsByTagName("ul"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul"<img src="http://208.75.149.97/images/smileys/wink.gif" width="19" height="19" alt="wink" border="0" />[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

</script>


TAKE THE ABOVE "OUT" OF THE HEAD SECTION!

Place it right here -> In the td that holds the div.

HERE
<td colspan="7" rowspan="2" valign="top" class="navbar">

JAVASCRIPT NOW GOES HERE!

<div class="suckerdiv">

 

Okey dokey.....tried that and nothing changed (new file is uploaded).

Also, noticed that the "popout" menus aren't appearing in IE. Does this have to do with the links referencing the wink.gif?

Sorry this is such a pain, I thought it was just something stupid I had done. Looks like it might be a much bigger issue....ugh.

 

No worries -
Ok the previous worked for me a few times. Put it back where it was and try IE then - don't worry bout wink.gif

 

Alrighty.....put it back where it was and still no changes.

Sorry...

 

As Ron Simmons would say "DAMN"

Ok I know its something small - I gotta scoot from here for a while, I'll have a think about it. Keep posting here too! 1 of us will figure it out!

Le007

 

Well, I've continued to look at this until I'm blue in the face.....I sure wish I knew what the "small" problem was!

Thanks for your help!

 

Ok I'm back. Try this just to eliminate other possiblities:

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
height: 150px;
}

 

Well....something happened....although, not necessarily better (new page uploaded).

Boy, I really do appreciate your time and tenacity!

 

I'm like Rocky, I never give up!

Ok scrap that - I started it from scratch and edited a different script I had.
THIS WILL WORK IN EVERY BROWSER!

I actually might use/need it myself sometime - give this a go, its perfect!
You'll need to change the href's all over the place, colour too...

THIS TIME make a new blank .html file, copy and paste all this in - build it there and test it there first and THEN put it into your live version. 100% sure this'll work! I'm

<html>
<head>

<link rel="stylesheet" media="all" type="text/css" href="flyout.css" />


<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="flyout_ie.css" />
<![endif]-->


</head>

<body> 

<div id="showcase">

<div id="info">

<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>

<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>

<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>

<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>

<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

</div> <!-- end .navholder -->

Code (markup):

 

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyoutt.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

 

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyoutt.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff; width:150px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

 

OK! A little bit of progress....I think.

First, I created a new blank page with a table that included several rows and columns. I created two new CSS files exactly as they are named in your example. Then, I copied in the HTML code you sent (a couple of DIVs and a UL appeared to be missing).

This produced the file at: http://wildrivernet.com/_fw/Untitled-3.html

Both IE and FF look good. Unfortunately, for some reason, Netscape jumps around like one of those whack the gopher games. Not sure why.

Sooooo......then I plug the code into my index page (new one uploaded), exactly as it was in the Untitled-3.html.

In IE, the main menu buttons show, but none of the "popouts" render. Possibly a Z-index problem? I took out the Flash component as a test, but nothing changed (so it's back in).

In FF, everything renders beautifully.

In Netscape, still got a major whack the gopher thing goin on.

We're getting closer "Rocky"!

 

Ok...you're gonna kill me. After re-coding my index page a thousand times, I noticed something. Most notably, the DOCTYPE was missing from the top of the page. The whole thing just started with the generic <HTML> tag. UGH!

Once I put in, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, the menu now renders beautifully in IE *AND* FF. Netscape is still jumping around underneath the flash component, so I'm still wondering if it's a Z-index problem. Ideas?

We are almost THERE!!!! Yahoo!

 

Ok doctypes are needed, yes!

NEARLY there... netscape - nope I dunno if Z-index would make a difference, IE and FF is all I ever test in because its the majority...

I looked at your page in both browsers and FINALLY its working!

Ok fix up the links and colours and show me the finished product

 

I looked at IE again and its not working? I think you should put in another </div> before the flash/after the menu! Its working thats the main thing!