Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with HTML above Flash elements

    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.

    Code:
    	<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>
    Code:
    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;
    }
    Last edited by Gnowoga; 07-14-2008 at 02:41 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need it in two places in that code
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    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>
    Code:
    div#menu{
      /*placement*/
      width:520px;
      position:absolute;
      top:41px;
      z-index:9999;
    }
    #header{
      width:919px;
      height:206px;
      position:absolute;
      top:64px;
      z-index:1;
    }

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    It seems to work on Safari for Windows. I do believe the Mac Safari and Windows Safari have similar rendering engines.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •