Leosquarez - Website Design and Development » z-index http://www.leosquarez.com Website Design and Development Wed, 17 Aug 2011 03:59:34 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 How to Fix IE7 z-index Problem http://www.leosquarez.com/how-to-fix-ie7-z-index-problem/ http://www.leosquarez.com/how-to-fix-ie7-z-index-problem/#comments Tue, 25 Jan 2011 07:19:29 +0000 leosquarez http://www.leosquarez.com/?p=205 If you have a dropdown menu that works fine in all the browser a part from IE 7 and you have a problem like this one:

Good Browser Bad Browser

Z-index work in Internet Explorer 7 (and lower )a different way:

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”

To fix z-index issue in ie give to the parent element a higher z-index actual fixes the bug!!!

WRONG:

<ul>
<li>
<ul class=”DROPDOWN”>
<li> …. </li>
<li> …. </li>
</ul>
</li>
</ul>

<div class=”SLIDER-JQUERY”>
………..
</div>

FIXED

<ul>
<li style=”z-index:999999″>
<ul class=”DROPDOWN”>
<li> …. </li>
<li> …. </li>
</ul>
</li>
</ul>

<div class=”SLIDER-JQUERY”>
………..
</div>

Try and let me know..

]]> http://www.leosquarez.com/how-to-fix-ie7-z-index-problem/feed/ 2 Embed Video/Flash Z-index Issue – 2 http://www.leosquarez.com/embed-videoflash-z-index-issue-2/ http://www.leosquarez.com/embed-videoflash-z-index-issue-2/#comments Thu, 01 Oct 2009 06:14:57 +0000 leosquarez http://www.leosquarez.com/?p=28 Alternative solution to fix the Z-index embed video or flash issue:

——

Add this code in your head

<script type=”text/javascript” src=”swfobject.js”></script>

<script type=”text/javascript”>
swfobject.embedSWF(”URL-VIDEO“, “UNIQUE-NAME“, “WIDTH“, “HEIGHT“, “9.0.0″, false,
false,
{wmode:”opaque”,quality:”high”,bgcolor:”#000000″,salign:”tl”},
{id:”UNIQUE-NAME“,name:”UNIQUE-NAME“}
);
</script>
—–
Add this in the body where you want to add the script:
<div id=”UNIQUE-NAME“></div>
—–
DONWLOAD THE JAVASCRIPT HERE:
]]> http://www.leosquarez.com/embed-videoflash-z-index-issue-2/feed/ 0 Embed Video/Flash Z-index Issue http://www.leosquarez.com/embed-videoflash-z-index-issue/ http://www.leosquarez.com/embed-videoflash-z-index-issue/#comments Thu, 01 Oct 2009 06:07:42 +0000 leosquarez http://www.leosquarez.com/?p=25 Today i add a video in one of my client web site and i realise that the drop down menu was disappearing below the video.

The video embedding code was:

<object height=”340″ width=”560″>
<param name=”movie” value=”URL-VIDEO”>
<param name=”allowFullScreen” value=”true”>
<param name=”wmode” value=”opaque”>
<param name=”allowscriptaccess” value=”always”><embed src=”URL-VIDEO” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” height=”WIDTH” width=”HEIGH”>
</object>

I realise that was a Z-INDEX issue (more info on z-index), i did check on the web for few solution.

First solution that i found was:

SWFObject, Flash and the z-index

This solution suggest to:

  • Set wmode=”opaque” combined with positioning
  • Wrap the object with a div with position: relative and set the object position: absolute.

CODE

#wrapper { position: relative; }
#overlay { position: absolute; }

-----

<script type="text/javascript">

   var flashvars = {};
   var params = { wmode: "opaque" };
   var attributes = {};

   swfobject.embedSWF("video.swf", "flash", "width", "height", "7",
                      "expressinstall.swf", flashvars, params, attributes);

</script>


-----


<object id="flashcontent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
   <param name="movie" value="movie.swf" />
   <param name="wmode" value="opaque" />

   <!--[if !IE]>-->
   <object type="application/x-shockwave-flash" data="video.swf" width="550" height="400">
   <param name="wmode" value="opaque" />
   <!--<![endif]-->

      <p>Please update your Flash Player</p>

   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->

</object>
]]> http://www.leosquarez.com/embed-videoflash-z-index-issue/feed/ 20