Placing HTML above Flash element

programming web dev
1

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. Is there any other solutions out there that can achieve the same thing?

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.

HTML:


    <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="#kobenhavn">K&oslash;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&oslash;</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="#">&Aring;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>

CSS:


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;
  z-index:1;
  clear:both;
}
2

Hi,
I am having the same problem. Can’t figure it out.
Post a link to the site, so people can see the problem.
Let me know if you find a solution.

Thanks

3

Try boosting your z-index to 9999

4

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 I did(see code).
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;
}
5

You don’t have to have position:absolute, you can have position:relative as well.