...

View Full Version : help with HTML above Flash elements



Gnowoga
07-14-2008, 02:22 PM
Trying to get my dropdown menu to show above the flash element. I really can't figure out what is going wrong here. I have applied z-index to relevant divs and <param name="wmode" value="transparent"> is present.

I realize that #menu does not have position:absolute, but I read somewhere that it was not needed when the placement was for passing through a flashobject with wmode. Am I wrong?

Any help?

Using swfobject for the flash code btw.


<div id="container">
<div id="banner"></div>
<div id="menu">

<ul id="nav">
<li id="showroom"><a href="#1"><span>Showroom</span></a>
<ul>
<li><a href="#oslo">Oslo</a></li>

<li><a href="#bergen">Bergen</a></li>
<li><a href="#stockholm">Stockholm</a></li>
<li><a href="#k&#248;benhavn">K&#248;benhavn</a></li>

</ul>
</li>
<li id="produkter"><a href="#2"><span>Produkter</span></a>
<ul>
<li><a href="#">Savo Ikon</a></li>

<li><a href="#">Savo Maxikon</a></li>
<li><a href="#">Savo EOS</a></li>
<li><a href="#">Savo XO</a></li>
<li><a href="#">Savo Apollo</a></li>
<li><a href="#">Savo Astarte</a></li>

</ul>
</li>
<li id="omsavo"><a href="#3"><span>Om Savo</span></a>
<ul>
<li><a href="#">Bedriftskultur</a></li>

<li><a href="#">Menneskene</a></li>
<li><a href="#">Kvalitet og Milj&#248;</a></li>
<li><a href="#">Garantier</a></li>
<li><a href="#">Savoprisene</a></li>
<li><a href="#">Jobbe i Savo</a></li>
<li><a href="#">&#197;rsrapport</a></li>

</ul>
</li>
<li id="forhandlere"><a href="#4"><span>Forhandlere</span></a></li>
<li id="kontaktoss"><a href="#5"><span>Kontakt Oss</span></a></li>
</ul>

</div>
<div id="people">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="919" height="206">
<param name="wmode" value="transparent">
<param name="movie" value="header.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="header.swf" width="919" height="206">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>


html,body {
margin:0;
padding:0;
background:url(../img/bg.png) repeat-x;
}
img{
border:0;
}
a, a:visited{
text-decoration:none;
color:#ab221c;
}
a:hover{
color:#a45c5c;
}
#container{
width:919px;
margin:0 auto;
overflow:hidden;
}
div#banner{
background:url(../img/banner.png) no-repeat left top;
width:338px;
height:64px;
float:left;
}
div#menu{
/*placement*/
width:520px;
float:right;
margin-top:41px;
z-index:3;
}
ul#nav{
width:520px;
float:left;
height: 23px;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}
#nav li a, #nav li a:visited {
display: block;
height:23px;
overflow:hidden;
}
li#showroom{
width:102px;
background: url(../img/showroom.png) no-repeat;
float: left;
height:23px;
overflow:hidden;
}
li#produkter{
width:100px;
background: url(../img/produkter.png) no-repeat;
float: left;
height:23px;
overflow:hidden;
}
li#omsavo{
width:91px;
background: url(../img/omsavo.png) no-repeat;
float: left;
height:23px;
overflow:hidden;
}
li#forhandlere{
width:119px;
background: url(../img/forhandlere.png) no-repeat;
float: left;
height:23px;
overflow:hidden;
}
li#kontaktoss{
width:108px;
background: url(../img/kontaktoss.png) no-repeat;
float: left;
height:23px;
overflow:hidden;
}
li#showroom a:hover{
background: url(../img/showroom.png) 0 -23px;
}
li#produkter a:hover{
background: url(../img/produkter.png) 0 -23px;
}
li#omsavo a:hover{
background: url(../img/omsavo.png) 0 -23px;
}
li#forhandlere a:hover{
background: url(../img/forhandlere.png) 0 -23px;
}
li#kontaktoss a:hover{
background: url(../img/kontaktoss.png) 0 -23px;
}
#nav li ul { /* second-level lists */
position: absolute;
width: 170px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border:1px solid #dfdfdf;
border-top:0px;
margin-top:1px;
z-index:3;
background:#f6f6f6;
}
#nav ul li {
width:170px;
}
#nav ul li a, #nav ul li a:visited{
color:#949494;
font-family:Tahoma;
font-size:14px;
text-decoration:none;
padding-left:9px;
}
#nav ul li a:hover{
background:#f0f0f0;
color:#ab221c;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
li span{
display:none;
}
#people {
height:206px;
width:919px;
background:darkred;
z-index:1;
clear:both;
}

_Aerospace_Eng_
07-14-2008, 03:04 PM
You need it in two places in that code

<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="919" height="206">
<param name="wmode" value="transparent" />
<param name="movie" value="header.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="header.swf" width="919" height="206">
<param name="wmode" transparent" />
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

If that doesn't work post a link to your page.

Gnowoga
07-15-2008, 10:40 AM
One more question: Is this confirmed not working in safari anyway? I don't have a mac so can't test. Other than that I nailed it.

here is the test page if someone can test safari versions!

http://xpand2.no/tmp/savo/test/



For people who are having similar problems:

Be sure to place wmode in both locations as mentioned by Aerospace.
You also have to have position:absolute on the divs you are using z-index on.

So:

If you have one div wrapping your menu then position it absolutely and give it z-index:9999;

the div wrapping your flash then needs a lower z-index than the menudiv and position absolute.

here's the relevant code:



<div id="menu">
.......
</div>

<div id="header">

<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="919" height="206">
<param name="wmode" value="transparent" />
<param name="movie" value="header.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="header.swf" width="919" height="206">
<param name="wmode" value="transparent" />
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

</div>




div#menu{
/*placement*/
width:520px;
position:absolute;
top:41px;
z-index:9999;
}
#header{
width:919px;
height:206px;
position:absolute;
top:64px;
z-index:1;
}

_Aerospace_Eng_
07-15-2008, 02:16 PM
It seems to work on Safari for Windows. I do believe the Mac Safari and Windows Safari have similar rendering engines.

Gnowoga
07-15-2008, 04:58 PM
That's good to hear. Might just be able to use it then. Would have been a shame to exclude the mac users. after all, there are a few of them. :)

Thanks for all help Aerospace,
and if someone has a mac and wants to report if everything works okay on mac safari then feel free. Just to make sure.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum