View Full Version : Nav ul dropdown ie bug css???

Nov 19th, 2009, 10:53 PM
i have a navbar with a mouseover dropdown li below. on my page the nav bar is above a swf file. in IE the dropdown appears behind the swf file. all other browsers it's fine. any ideas in laymens terms? html below. css below that. thanks in advance!


<div id="menuwrapper">
<ul id="p7menubar">
<li><a href="index.html">Home</a></li>
<li><a class="trigger" href="wine.html">Portfolio</a>
<li><a href="wine.html">Wine Design</a></li>
<li><a href="studies.html">Case Studies</a></li>

<li><a href="print.html">Print</a></li>
<li><a href="web.html">Web</a></li>
<li><a href="photography.html">Photography</a></li>
<li><a href="video.html">Video</a></li>

<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>

<br class="clearit">

css below

#menuwrapper {


.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;

#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
font-family: "Times New Roman", Times, serif;

#p7menubar a {
display: block;
text-decoration: none;
padding: 3px 28px;
border-right: 1px dotted #ffffff;
font-size: 0.85em;
color: #ffffff;

#p7menubar a.trigger {
padding: 5px 16px 5px 10px;
background-image: url(images/p7PM_dark_south.gif);
background-repeat: no-repeat;
background-position: right center;

#p7menubar li {
float: left;
width: 9em;

#p7menubar li ul, #p7menubar ul li {
width: 12em;

#p7menubar ul li a {
color: #ffffff;
border-right: 0;
padding: 3px 12px 3px 16px;

#p7menubar li ul {
position: absolute;
display: none;
background-color: #FFFFFF;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background-image: url(images/p7exp_mgrad.jpg);
background-repeat: repeat-x;

#p7menubar li:hover a, #p7menubar a:focus,
#p7menubar a:active, #p7menubar li.p7hvr a {
color: #3c3c3c;
background-color: #CCCCCC;

#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;

#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
color: #3c3c3c;
background-color: transparent;

#p7menubar ul a:hover {
background-color: #606060!important;
color: #FFFFFF!important;

#p7menubar li {width: auto;}


Nov 20th, 2009, 08:34 AM
Could you please post a link to your page?

Nov 25th, 2009, 05:58 PM
the site is www.peerjohnson.com

thanks in advance.

Nov 26th, 2009, 12:04 AM
You'd need to add wmode transparency to your swf file, see kb2.adobe.com/cps/142/tn_14201.html. You may just add it using addParam() of your swfobject.

Dec 2nd, 2009, 05:27 PM
thank you for your help. i tried your suggestion but was unable to implement, couldn't get correct syntax, my fault.

i had someone work on it, they fixed it & it looks like what they did was what you suggested may have done something to flash file as well, can't tell;

added html

so.addParam("wmode", "transparent");

Dec 3rd, 2009, 07:11 AM
I think they added the following too
#menuwrapper {/*p7exp.css (line 7)*/