dropdown menus - suckerfish - basics?

[mafiasam]

I only breifly looked at the site, but in the original code from the site the css defined the width...did you merge this with your css or create an additional css for it? and is the width statement present.

There were also several css settings to mitigate the IE troubles, go back and read what they are and insure that you have them.,

The width of everything seems to be in ems and I have never been able to figure out exactly how to work with that measurement. I tried changing the whole thing to pixels so I could work with it easier but the second and third level menus were disconnected from the previous level. I ended up reverting it back to the previous measurements and was hoping that someone could give me an idea how to work with it.

[mafiasam]

and moving right along.
Okay...
decided not to center the page because IE has trouble with that crap and can't seem to keep the menus from center aligning.
So now I have the whole store left aligning in the browser which works quite well.
I still want to work on the sizing of this suckerfish code but no one seems to have the answer for me. Maybe I'll have to post directly to the son of suckerfish forums.
who knows, maybe in the end we can have a little dedicated "zen suckerfish menu" add-in when I'm done with all this work?
(right now it doesn't look too promising, lol.)

still have to wonder where the best place to drop the html code is?
i put it in the tagline div. I am looking at moving that div around a bit to get the placement right for both IE and FF, but for now...

it's break time. ha ha.

sam

[kobra]

If you are intent on using a table I have to bow out causeI never got y head around them.

I place the code outside of the php tags. Like if you want it below the header banner place it right after the BOF for the branding display, in between the php listings. Just what I do.

[mafiasam]

If you are intent on using a table I have to bow out causeI never got y head around them.

I place the code outside of the php tags. Like if you want it below the header banner place it right after the BOF for the branding display, in between the php listings. Just what I do.

Well, I wish I didn't have to result to the table. For me they're simple to understand. Of course, I use a WYSIWYG editor (Adobe GoLive) so it makes it really easy to work with tables.

the deal with the table is that I can put the logo and the suckerfish code all centered and aligned atop each other without having to worry about whether firefox or IE are going to treat them differently. Now if I can control both those elements and keep them together I should be able to position the whole table using the future zen divs.

TPL_HEADER

<div id="tagline">
				<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>
	<p>				
				<div align="center"><table width="1024" border="0" cellspacing="2" cellpadding="0">
			<table>
			<tr>
				<td>
									<div align="center">
										<img src="http://www.oldwestgames.com/includes/templates/future_zen/images/header_bg.jpg" alt="" height="110" width="760" border="0"></div>
								</td>
			</tr>
			<tr>
				
				<td><ul id="nav">

	<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5">Poker Chips</a>
		<ul>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_6">Casino Grade</a>

				<ul>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_6_44">Pharaoh's Club</a>
					</li>

					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_6_46">Paulson Top Hat/Cane</a>
					</li>
					
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_6_47">Nevada Jack's</a>

					</li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_6_48">Desert Sands</a>
					</li>
					
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_6_49">Coconut Tree</a>
					</li>
					
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_6_50">World Poker Tour</a>
					</li>
					
				</ul>
			</li>
			
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_45">Home Use</a>
				<ul>

					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_45_9">3 Color</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_45_8">2 Color</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_45_10">Embedded Graphics</a></li>
					
				</ul>
			</li>
			
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_7">Label-Ready</a>
				<ul>

					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_7_51">Las Vegas Nexgen</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_7_52">Multi-Color Nexgen</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_7_53">Lucky Bee Nexgen</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_7_54">River Poker Tour Nexgen</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_7_55">Classic Eight Stripe</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_7_56">Monaco Six Stripe</a></li>
				</ul>
			</li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_12">Labeled</a>
				<ul>

					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_12_76">Hold'em Saloon</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_12_78">U.S. Navy</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_12_79">U.S. Marines</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_12_80">U.S. Army</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_12_81">U.S. Coast Guard</a></li>
				</ul>
			</li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_11">Hot Stamped</a>
				<ul>

					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_11_73">Privateer Dice</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_11_74">Landmark Crowns</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=5_11_75">Landmark Dice</a></li>
					
				</ul>
			</li>
			
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=18">Sets</a>
				<ul>
					<li><a href="#">650 Piece</a></li>
					<li><a href="#">500 Piece</a></li>
					<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=18_19">Deluxe Packages</a></li>
				</ul>
			</li>

		</ul>
	</li>

	<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=17">Chip Cases</a>
		<ul>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=17_39">Mahogany</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=17_38">Leather</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=17_34">Aluminum</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=17_37">Vinyl</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=17_42">Clear/Acrylic</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=17_43">Officially Licensed</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=17_41">Large Rolling</a></li>
		</ul>
	</li>

	<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=14">Tables</a>
		<ul>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=14_21">Standard</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=14_25">Professional</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=14_15">Table Tops</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=14_26">Officially Licensed</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=14_27">Table Accessories</a></li>
		</ul>
	</li>

	<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=16">Cards</a>
		<ul>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=16_32">Bee</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=16_31">Casino</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=16_28">Copag</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=16_29">Kem</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=16_30">Royal</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=16_33">ESPN</a></li>
		</ul>
	</li>
	
	<li><a href="http://www.oldwestgames.com/index.php?main_page=index&cPath=16">Support</a>
		<ul>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=page_2">About Us</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=contact_us">Contact Us</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=page_3">Chip Labeling</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=page_4">Choosing a Chip</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=shippinginfo">Shipping/Returns</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=privacy">Privacy Notice</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=conditions">Conditions of Use</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=gv_faq">Gift Certificates</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=discount_coupon">Discount Coupons</a></li>
			<li><a href="http://www.oldwestgames.com/index.php?main_page=site_map">Site Map</a></li>
		</ul>
	</li>

</ul></td>
			</tr>
		</table>

			</p></div>

Stylesheet elements:

#nav        { color: #900; font-size: 10px; font-weight: bold; line-height: 1px; background-color: #fff; list-style-type: none; list-style-position: outside; margin: -1px 0 0; padding: 0; position: relative; z-index: 1000; top: 0; width: 700px; height: 15px; border-top: 1px solid #11297b; border-bottom: 1px solid #11297b   }
#nav ul   { color: #900; font-size: 10px; line-height: 1px; background-color: #fff; text-align: center; list-style: none; margin: 0; padding: 0; z-index: 1000    }
#nav a  { color: #900; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 140%; background-color: #dfc5a1; text-decoration: none; text-align: center; display: block; z-index: 1000; width: auto; height: auto  }
#nav a:link, #nav a:visited, #nav a:active       { color: #900; background-color: #dfc5a1; z-index: 1000 }
#nav a:hover, #nav a:focus     { color: #900; background-color: #fff; z-index: 1000 }
#nav li    { text-align: left; z-index: 1000; width: 140px; float: left }
#nav li ul          { background-color: #fff; position: absolute; z-index: 1000; left: -999em; width: 139px; border-top: 1px solid #11297b; border-right: 1px solid #11297b; border-left: 1px solid #11297b }
#nav li ul.leftside          { background-color: #fff; margin-left: -1px; position: absolute; z-index: 1000; left: -999em; width: 139px; border-top: 1px solid #11297b; border-right: 1px solid #11297b; border-left: 1px solid #11297b }
#nav li ul.rightside           { background-color: #fff; margin-left: 1px; position: absolute; z-index: 1000; left: -999em; width: 139px; border-top: 1px solid #11297b; border-right: 1px solid #11297b; border-left: 1px solid #11297b }
#nav li ul li   { background-color: #fff; z-index: 1000; width: 139px; border-bottom: 1px solid #11297b  }
#nav li ul li a:hover   { z-index: 1000; border-style: none }
#nav li:hover ul, #nav li.sfhover ul     { z-index: 1000; left: auto }
#nav li ul ul      { margin: -16px 0 0 139px; position: absolute; z-index: 1000 }
#nav li ul ul.two_lines      { margin: -31px 0 0 139px; position: absolute; z-index: 1000 }
#nav li ul ul.left_popout     { margin: -31px 0 0 -141px; position: absolute; z-index: 1000 }
#nav li:hover ul ul, #nav li.sfhover ul ul  { z-index: 1000; left: -999em }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul   { z-index: 1000; left: auto }
/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul   { margin-left: 0; z-index: 1000 }
#nav li li a:focus + ul  { margin-left: 200px; z-index: 1000 }
#nav li li a:focus     { color: #900; background: #dfc5a1; margin-left: 1000em; z-index: 1000 }
#nav li li li a:focus     { color: #900; background: #dfc5a1; margin-left: 200px; z-index: 1000 }
#nav li:hover a:focus, #nav li.sfhover a.sffocus     { color: #900; background-color: #fff; margin-left: 0; z-index: 1000 }
#nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul     { color: #900; background-color: #dfc5a1; margin-left: 10em; z-index: 1000 }

[mafiasam]

update:

http://www.oldwestgames.com

I went ahead and put the suckerfish html and javascript inside the logowrapper div in the tpl_header because it moved it up the page a bit and seemed like a better fit.

Everything is looking great now in firefox.

I finally was able to get rid the empty logo image in IE by removing the php code for it in the tpl_header. (i think that's where it was, lol)

But in IE there is still a problem with all the damn white space because of the difference in the way it handles divs from firefox.

Truthfully, I would rather develop for my store to readable and navigable in both firefox and IE. If I only develop for IE then the Firefox layout suffers. So I put a firefox banner on my site and let the whitespace stay. Hopefully the next version of IE will handle real world code better.