Spry menu bar help.. "more like nightmareweaver.."

The_Glad_Hatter

So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at my wit's end fo this one.

So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise:

when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:

<li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>
<ul>
<li><a href="#">Digital Matrix Systems</a></li>
<ul>
<li><a href="#">R2 Digital Audio Matrix</a></li>
</ul>
<li><a href="#">pre-amplifiers & mixers</a></li>
<ul>
<li><a href="#">PMX124</a></li>
</ul>

the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code?

i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout?
ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull.

Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...

HTML code for the menu:

<tr>
<td><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">audio equipment</a>
<ul>
<li><a href="#">Digital Matrix Systems</a></li>
<ul>
<li><a href="#">R2 Digital Audio Matrix</a></li>
</ul>
<li><a href="#">pre-amplifiers & mixers</a></li>
<ul>
<li><a href="#">PMX124</a></li>
</ul>
<li><a href="#">music Sources</a></li>
<li><a href="#">amplifiers</a></li>
<li><a href="#">paging</a></li>
<li><a href="#">speakers</a></li>
<li><a href="#">microphones</a></li>
</ul>
</li>
<li><a href="#">racks and stands</a></li>
<li><a href="#">cables</a></li>
</ul>
</li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a>
<ul>
<li><a href="#">Who are we?</a></li>
<li><a href="#">history</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">philosophy</a></li>
<li><a href="#">careers</a></li>
</ul>
</li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a>
<ul>
<li><a href="#">catalogs</a> </li>
<li><a href="#">manuals</a></li>
<li><a href="#">software</a></li>
<li><a href="#">documents</a></li>
<li><a href="#">pricelists</a></li>
</ul>
</li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li>
</ul></td>

sprymenuhorizontal.css:

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 14px;
cursor: default;
width: 1010px;
font-family: Arial, Helvetica, sans-serif;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 166px;
position: absolute;
left: -1000em;
background-color: #6C6C6C;
height: 0px;
margin-top: 0px;
margin-right: 0em;
margin-bottom: 10px;
margin-left: 0em;
text-align: right;
text-indent: 0em;
padding-top: 0px;
padding-right: 0em;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
height: 0px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 166px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
height: 41px;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 162px;
float: right;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #666;
background-color: #6C6C6C;
height: 0px;
padding-left: 0em;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #6C6C6C;
padding: 0em;
color: #FC0;
text-decoration: none;
font-size: 14px;
margin-left: 0em;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #FC0;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #FC0;
color: #FFF;
}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...

flatlinegraphics

the simple answer is "don't use spry, use jquery instead". the long answer is, do you have this posted up somewhere? Its hard to troubleshoot with code snippets, esp ones including table cells (bad designer! bad! no!) without the surrounding code.

and yes, as a designer you should be at least passable with build out. web dev is production art for the new century. its like not knowing how to do clipping paths in the DTP era.

The_Glad_Hatter

Sorry 'bout the tables...
I can imagine it must be pretty sloppy with the tables all over the place. creating it in PS and slicing it up in fireworks is really the only way i taught myself to do it. I just stumpled upon the existance of spry by accident, so that's why i use them. i'll look up jquery and see if i can work something out in there.

My illustrator's/ graphic designer's degree was pretty low on webdesign.

I'll try to upload the page to the company webserver so you can take a look. (can't access the ftp right now)

The_Glad_Hatter

so i was looking at the jquery stuff. I don't understand the difference between that and whatever it is i'm doing atm, but it looks really powerfull, has great compaitibilty and relatively easy to implement.

and as i was messing around with jquery tutorials i noticed that if i include a submenu, i should include it between the previous item's <il> and >/il> markers, instead of after it. oops.

So, huzzah, now it works in Chrome, FF and IE6. thanks for pointing me to jquery, if i hadn't begun from scratch in there, i wouldn't have noticed my error (being code-illiterate). Or editing the space around my text in general..

so the compatibility bit is fixed.

But if you could tell my in what part of my css stylesheets i'd need to edit what in order to have the text indent a bit to the left, but without altering the menu width, that's be brilliant.

Also, How can i edit a specific submenu width? some of the menus will hav elots of really long names, others will have exclusively short type names.

The test html you asked for is online here.
Please don't mind the stretched centre banner, all the product images and ads are placeholders.

(if anything on there makes more experienced people cringe, i'd love to know )

flatlinegraphics

the benefit to jquery is that it runs purely from the framework and by targetting css classes or ids. there are tons less of the crap that dreamweaver shoves in there to make things work. so instead of working with dw, spry, and css, you are just working with jquery and css.

instead of all this crap:
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a>
you can end up with <a href="#" class="btn products">Products</a>
leaving all the styling to the css, and all the interactivity to jquery. separation of content, presentation, and interactivity. and with less crap, there is less to go wrong. simplicity is key.

plus there are a ton of plugins and howto's out there. and if you use the ubiquitous thickbox gallery viewer thingy, then you need jquery anyway.

as for different sized subs, best way is to learn css inheritance.
ex: <ul class="sub short"><li>....
<ul class="sub long"><li>.....
css:
.sub{all your subnav properties}
.sub.long{width:200px;}
.sub.short{width:100px;}

That may have to wait till next time, as this all requires pulling the spry crap out and starting over (and learning a lot more css).
For your current problem, you can still try just adding a class to the long/short ones. and then declaring the widths below all the spry stuff. I'm not familiar with spry as much, so I don;t know how it creates that stuff. it may pull the widths once it runs, rather than from the sheet.

hope i'm helping, and not making it worse. once you start trying to do things the right way, its a never ending hole... but once you get over the initial learning curve, its waaaay easier than clicking around in DW and spending time trying to figure out why things are going pear shaped.