PDA

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



prjadvertising
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!
pj

html

[CODE]
<div id="menuwrapper">
<ul id="p7menubar">
<li><a href="index.html">Home</a></li>
<li><a class="trigger" href="wine.html">Portfolio</a>
<ul>
<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>

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


</ul>
<br class="clearit">
</div>
</div>

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;}

[ENDCODE]

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

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

thanks in advance.

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

prjadvertising
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");

abduraooft
Dec 3rd, 2009, 07:11 AM
I think they added the following too
#menuwrapper {/*p7exp.css (line 7)*/
position:relative;
z-index:2;
}