Flash Problem in Firefox with horizontal menu

Hello,

I have a css horizontal menu that sits right above a flash header. The first two menu dropdowns in get screwed up when they are above the flash. I have looked all around the forums and help and found where I should use the transparent mode but that only seems to help in IE and other browsers except firefox.

I set up the dropdowns with a blue border around them and in the first two dropdown menu items the the border gets chopped up but this does not happen in the other dropdowns in the menu?

This issue goes away completely when I remove the flash header so i am sure it is causing this. I just don't know how or if there is a way to fix it?

Here is a link to the development page, Please Help!

catalog/

The page looks good to me with firefox on PC. What OS are you using? What version of firefox? Maybe I don't know what I'm looking for, what do you mean by chopped up?

The first two drop downs are getting chopped up and off centered. If you look at the attached screen shot you will notice that the blue border line on the right in the drop down is getting chopped or something.

I am viewin on a mac but my client is on a PC and is seeing the same error. I am viewing in firefox 3.6 and I believe it is the same with my client.

I don't see the problem on my pc using firefox v3.6.13

I also checked in every other browser I have installed and didn't experience the problem (opera, safari, IE, chrome)

I can see the problem in FF on MAC though, but not on any other browser... I'm not sure what to do. It appears to be a bug in FF on mac and I don't know a work-around. I played around with the css for a half an hour or so and I couldn'd find a fix.

Hello,

Thank you for looking into this, I really appreciate it.

I guess I just don't understand why it is doing it to the first 2 dropdowns in the menu and then the rest are fine? And so if you can't figure it out this product is kind of useless to me and anyone else who wants to place a menu above or near flash. We just have to tell our clients "oh well, thats how it is"?

Normally I would not care especially if the issue was in IE but this is FF a very modern browser and it happens my client is viewing this site in a mac FF browser so in their eyes it's broken and I have to fix it.

There has to be a work around for this some how. Or I have to start looking for a more reliable product?

Any thoughts on what I should do here? Or is there someone else who can take a look and figure out a solution. Or at least figure out what is going wrong exactly?

Thank you again for your time.

I had 3 other engineers look into it, and I guess you will have to look for "a more reliable product", but a little research will tell you the more reliable product you will want to look for is the browser.

It appears this only happens with FF 3.6 on MAC when overlapping a flash movie. Several people have reported similar issues we found in google searches, but there isn't a known work around.

I have confirmed that it is fixed in FF 4, which is due out soon, and even worked in FF 3.5 as well as currently works for all browsers on PC and all other browsers on MAC. I doubt you can find another menu solution that gets around the issue, since it would appear to be an issue with the browser and not the html and css that is used for the menu.

Maybe you can find a flash based menu system to get around it, but I don't think another tool will change the limitation of the browser you are running into as long as it is using standard html lists and css. I'm sorry to bear the bad news, but there appears to be no easy solution that we can give you.

Hello,

I don't mean to say that your product is not reliable I think I typed that out of frustration. I really appreciate your help on this, I just can't figure out whats causing it is all.

I guess I will need to look into other solutions. Again thank you for your time. if I happen across a fix I will let you know.

Please let us know if you find a fix and we can make sure to let anyone else know who may run into the problem.

I know this doesn't fix your problem, but you might be able to hide any apparent discrepancy by using background color instead of border highlighting to mark the hover state:

For instance, (menu.css line 98)

ul#cssmw ul.level-1 {
  left: 0px;
  top: 100%;
}

and (menu.css line 108)

ul#cssmw ul.level-1 > li > a {
    background-color: #040499;
    background-image: none;
    border-top: 1px solid #FFFFFF;
    border-bottom: solid 1px #FFFFFF;
    color: #FFFFFF;
    display: block;
    font: small-caps bold 12px Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 5px 10px 5px 15px;
    text-align: left;
    text-decoration: none;
    text-transform: capitalize;
    width: 100px;
}

and (menu.css line 130)

ul#cssmw ul.level-1 > li:hover > a {
    background-color: #D22E09;
    background-image: url("../cssmw_images/navstar.gif");
    background-position: 2px center;
    background-repeat: no-repeat;
    border-top: 1px solid #D22E09;
    border-bottom: 1px solid #D22E09;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}

might not be what you had in mind, but it may not appear to be 'faulty' to your clients. I can't test this on MAC (Firefox 3.6), though (on a Windows machine) - so it may have its own flaws.

As promised if I found a solid fix for the menu bug I would let you know.

It is definitely a firefox specific bug and is documented and being delt with by mozilla. See link below.

show_bug.cgi?id=550246


Anyway here is some javascript that fixes the issue of the browser by forcing odd width to an even width. I added it to my site and all issues are now gone!


<!-- FORCE BROWSER WIDTH TO ODD NUMBER -->

<script Language="JavaScript">
var isFireFox=new Boolean();
if (navigator.userAgent.indexOf("Firefox")!=-1) {
if (navigator.platform == "MacIntel" || navigator.platform == "MacPPC") {
isFireFox = true;
} else {
isFireFox = false;
}
} else {
isFireFox = false;
}
function isEven(value){
if (value%2 == 0)
return true;
else
return false;
}
var width;
window.onresize = function() {
if (isFireFox) {
width = window.innerWidth;
if (isEven(width)) {
self.resizeTo(width-1, window.outerHeight);
}
}
};
</script>