View Full Version : Spry menu not dropping down in PC Firefox or Safari!!

12-05-2009, 10:28 PM
I was hoping someone could help me before my brain explodes. I've been trying for three days to create a clean drop-down menu that is cross browser compatible. I thought I'd found the solution with the spry feature in dreamweaver, but when I tested it in different browsers the drop-downs don't work in PC Firefox or Safari, though they look beautiful in IE.

Here is the link: http://www.bravada-cci.com/strongpoint/index.html

The link to my css is in the source of this page if you need it. ANY suggestions would be wonderful and greatly appreciated.

Thanks in advance!

12-06-2009, 09:53 AM
Looks like the problem is caused by:

ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
left: 42;
overflow: hidden;

Remove overflow:hidden and it's OK, in FF and Chrome at least.

12-06-2009, 04:04 PM
when I tested it in different browsers the drop-downs don't work in PC Firefox or Safari, though they look beautiful in IE.

This is the first indication of incorrect markup. Never, ever trust IE to do anything right.

12-06-2009, 04:17 PM
Thank so much, both of you. Three days of frustration before I decided to post, which obviously I should have done earlier.

I'm trying to slowly understand the coding language, and it's been an uphill battle. Thank goodness for good resources online!!!

Thanks again. I'll remember in the future to test in Firefox and Safari more.

12-06-2009, 06:21 PM
I'll remember in the future to test in Firefox and Safari more.Not just more. One of those two browsers should be your FIRST test. IE should be your LAST.

12-06-2009, 08:40 PM
Okay, one final problem and I think I have this menu figured out. Thanks again for all the previous advice. I can't say I'm a programmer, though I have been trying to understand the coding and not make too much of a mess of it.

SO... here it is.

I've added an image below my navigation menu and a new problem has appeared. In IE the drop down menus appear with a solid white background when I'd like them to be transparent. I've tried adding "background-color: transparent;" to the ul.MenuBarHorizontal ul and ul li styling, as well as trying to add them to the IE crack at the bottom of the page, all to no avail. At one point I had it added to EVERY single style, trying to get this to work. If you look at the code now, I've gone back to my previous.

Any ideas of where I need to add this in to get it to work?


12-06-2009, 10:01 PM
Hello jennybear1978,
The white background is not coming from any CSS. It is your images. See http://www.bravada-cci.com/strongpoint/images/navigation/servicesnav_01_hover.gif

To make the dropdowns transparent you will need new menu button images.

12-06-2009, 10:02 PM
The problem is your drop downs are images so that is covering up the background.

12-06-2009, 10:08 PM
Hi Guys,
I don't mind that the background of the actual menu is white (where the images are). But I had to assign a width of 190 px to both the ul.MenuBarHorizontal ul and li styles to contain the images. I wanted to do width:auto; to make the dropdowns size to the size of the buttons, but that made the button images flow horizontally. This 190px container extends beyond the width of the actual images in the menu, and that is the part that I want to be transparent - the container, not the actual buttons themselves. Does this make sense?

12-06-2009, 10:18 PM
It does make sense but it sure looks like you're already doing that. In Firefox anyway.
To test, change it to a color and see what happens -

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #f00;
padding: none;

12-06-2009, 10:19 PM
Also, again, this problem is only in viewing with IE. In firefox and safari it works beautifully!

12-06-2009, 10:22 PM
Okay, VERY odd. When I changed that tag it made the background red. BUT when I changed it back to "background-color:transparent;" it just made the background WHITE again!!!! AAAAAAHHHH!

12-06-2009, 10:26 PM
Could it have to do with this coding?

/* 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;
/* 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;

12-06-2009, 10:31 PM
I think this is a case of invalid code. Check the links about validation in my sig below. If changing <div id=whatever> to <div id="whatever"> doesn't fix it we can have another look.

12-06-2009, 10:48 PM
You have been so patient in helping untrained me with my problems. Thanks! SO, the errors I have all seem to be the same. I'm new in working with the <div> tag, so if you would mind telling me what needs changing, then I know for the future. The two main errors are:

Error Line 44, Column 8: XML Parsing Error: AttValue: " or ' expected
<div id=container style="text-align:center; top:0;">

Error Line 103, Column 11: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

<div id=mainimage style="position:relative; width:750px; height:340px; padding

12-06-2009, 10:49 PM
Sorry, just re-read your post. Do both of these errors have to do with the lack of quotations around the div id?

12-06-2009, 10:51 PM
YEY! Well, I am validated!!!!!!!!!!!!!!!!!!!

BUT... still the same problems with the container backgrounds for drop downs. Sigh.

12-06-2009, 10:58 PM
Good job! You got if fixed before I got a chance to see your question.
There are a couple more things to clear up, could have something to do with it or not...

Have a look at the results from the CSS validator (yes, there are two validators) - http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3a%2f%2fwww.bravada-cci.com%2fstrongpoint%2findex.html

12-06-2009, 11:01 PM
<div id="container" style="text-align:center; top:0;">
although valid, isn't doing anything. top:0; is a positioning coordinate and is only going to work with position relative or absolute...

12-06-2009, 11:13 PM
Okay, I'll take a look at all the CSS issues. I'll have to bookmark those two validators, because they are VERY useful.

If I don't want a background-color, do I just leave the whole line out? Since background-color:none; is not valid?

12-06-2009, 11:14 PM
Yes, just leave it out. FF obviously defaults to transparent. IE I thought did as well but may not... that could depend on the DocType I suppose? I keep checking and cannot find that #fff is being inherited from anywhere.

12-06-2009, 11:20 PM
Everything is now valid except for the "f/loat", which is put in automatically by Spry when creating the menu, and supposedly it needs to be there. Still seeing the white background on the menus. This is driving me bananas.

May I say, you are a godsend to spend so much time helping a stranger on their website. Don't know how I would have gotten any of this fixed. Thanks.

12-06-2009, 11:22 PM
Haha, I haven't been too much help yet!
Still puzzling on your transparent background...

12-07-2009, 01:21 AM
Okay, so I still haven't figured out the coding. But, I came up with a simpler solution (more like a cover-up, not a fix). I just made all the drop downs the full width of the drop down containers - so, it doesn't matter if there is a white background because the buttons cover it up. Kind of a cop-out though... I'm still going to try to figure out what was going on.

12-07-2009, 01:47 AM
It looks to me like you've fixed it. It may seem like a cover up but, a lot of times, that is the fix.

I found a drop down menu that seems to work similar to yours and makes mention of an IE failed Hover bug. Maybe it will help... http://www.positioniseverything.net/css-dropdowns-red.html