close ad
WARNING PC USERS: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Obscured drop-down css menus

Thread began 10/05/2011 7:16 am by rob.parkin390637 | Last modified 10/11/2011 10:58 am by rob.parkin390637 | 2609 views | 8 replies |

rob.parkin390637

Obscured drop-down css menus

I have a php site originally created with siteassistpro. The dropdowns from the navigation menu are being obscured by an apDiv Tag. The Div Tag contains a Flash Movie.

I’ve set the z:index of the apDiv to a low number and all of the CSS elements (that is for all those that I could find in menu.css and menu_ie.css) of the CSS Drop-Down Menu to a high number. This seems to have worked for Firefox (where the menus now display correctly) but not for IE, Chrome or Maxthon (where the drop-down parts are still being obscured by the Div Tag).

Is there something else I can change to make the drop down menu elements stay on top ?

Sign in to reply to this post

Jason ByrnesWebAssist

please send a link where i can see the problem.

Sign in to reply to this post

rob.parkin390637

Hi Jason

Link to problem page as requested:

index.php

rob

Sign in to reply to this post

Jason ByrnesWebAssist

I must be missing something, I dont see a problem on that page with the menu going bellow the flash movie?


have tested in Fire Fox and safari, what browser are you using?

maybe try clearing the browsers cache?

Sign in to reply to this post

rob.parkin390637

I always test my pages against a range of browsers and this time I get a strange mix: Internet Explorer 9, Maxthon and Google Chrome all fail to show the full menu drop downs but Opera and Firefox seem to work ok.

Sign in to reply to this post

Jason ByrnesWebAssist

In order to ensure that your Flash movie does not display over all other elements on the page, you need to apply the wmode="transparent" parameter to the <embed> reference for the swf file.

e.g.: <embed src="myflashmovie.swf" wmode="transparent">

View the following link for more information: tn_15523.html



you may also run into problems with the apDiv1 element having the position set to absolute.

@import url("CSSMenuWriter/cssmw_home/menu.css");
#apDiv1 {
position:absolute;
height:390px;
z-index:0;
top: 215px;
padding-left: 8px;
}


When working with the stacking order with z-index in css, you also need to specify a position. the z-index is broken up into layers depending on the postion

The absolute position layer is on top, with the relative position layer bellow it

the menu uses relative positioning, in the menu css at CSSMenuWriter/cssmw_home/menu.css i can see you have tried setting the z-index:

ul#cssmw_home {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
z-index: 10000;
}



but without setting a position, it's not changing which layer it applies to.

try using:

ul#cssmw_home {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
z-index: 10000;
position:absolute;
}
Sign in to reply to this post

rob.parkin390637

Hi Jason

Thanks for looking into this for me. Sorry to report that neither adding wmode="transparent" to the Flash parameters or changing the position to absolute in the cssmw_home/menu.css file seems to make any difference.

The drop-down menus are visible in Firefox and Opera but obscured by the Flash movie in Maxthon, IE, Chrome and Safari.

...

Sign in to reply to this post

Jason ByrnesWebAssist

did you use the Dreamweaver property inspector to set the WMODE? Or did you manually edit the code for the object parameter?


you need to use the property inspector to set the WMODE property. There is more than one place the change needs to be made, using the property inspector will make sure the change is made in all of the places it needs to be made.

Sign in to reply to this post

rob.parkin390637

BAD NEWS:
I'm using Dreamweaver CS3 and the property inspector in this version doesn't seem to have anywhere to set these parameters for the Flash movie.
GOOD NEWS:
Having looked at the code there seems to be only 3 places that WMODE could be inserted - so I stuffed it in all three places and behold the menues are now visible in Firefox, Maxthon, Chrome, Sarafi and Opera.
BAD NEWS:
The menus are still being obscured in IE9 ...

I guess 5 out of 6 is reasonable - just a pity the duff one is IE as I've heard that rather a lot of people use this !!

Sign in to reply to this post

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...