close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Flash Problem in Firefox with horizontal menu

Thread began 12/20/2010 4:24 pm by bcardone | Last modified 1/11/2011 4:19 pm by Ray Borduin | 2437 views | 10 replies |

bcardone

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/

Sign in to reply to this post

Ray BorduinWebAssist

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?

Sign in to reply to this post

bcardone

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.

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

bcardone

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.

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

bcardone

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.

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

bcardone

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>

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...