SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting Z-Index to Work on IE8/FF and... IE7 (which is the problem)

    Check out this page:

    Demo Page

    In it you'll see flash player that I'm resizing. When you click the "lights out" option underneath th video player (to the right underneath it), IE8 and FF and Chrome all do great. The video expands, a black covers the browser window and some extra parts of the site, and you can still see the video player. (you can push the light bulb in upper right corner to go back to normal viewing)

    But, when I turn on compatibility mode for ie7, the thing starts freaking out. When I click "lights out", the black covers everything (it is appended to the document.body through javascript) and the flash disappears entirely.

    I know ie7 has a z-index bug, and it's obviously not listening to the z-index of 5000 that the div has that's holding the player. How can I get ie7 to respond like the other browsers?

    Cheers
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, first lemme say, that page is a nightmare to debug. I almost cried when I saw the massive inline styles .

    The outer parent needs the z-index applied
    Code:
    .mainbg{position:relative;z-index:2700;}
    However that will show the entire rest of the page so you may wanna rethink the structure. I'm afraid to even touch the code because someone can get lost very easily on all the messy code you have.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol. Yeah, I got a ton of sh*t going on. Doing the z-index causes an appearance, but the whole body.

    The idea of the black background is to "lights out" everything, so it mimics flash fullscreen, but doesn't use all the flash fullscreen resources; enabling slower computers to enjoy bigger video.

    The ie7 has two issues. First, the div that turns everything black is created by Javascript and appended to the document.body.

    Code:
    .blackout {
    position:absolute;
    width:100%;
    height:1000px;
    vertical-align:middle;
    text-align:center;
    text-align: -moz-center;
    
    background:#000000;
    z-index:2600;
    padding-top:250px;
    top:120px;
    left:-0px;
    color:#FFFFFF;
    filter:alpha(opacity=95);
    	-moz-opacity:0.95;
    	-khtml-opacity: 0.95;
    	opacity: 0.95;
    
    }
    Since the java appends it to body, it means it is practically the last element on the page, and ie7 and earlier versions automatically give z-index priority to elements that come last; unless each and every element has a z-index given to it.

    In ie7, the flash can't even expand out of left column -- though I have overflow: visible -- without the right column getting a lower z-index. I've tried changing the z-index on each, but then it causes the black to cover everything up in all other browsers too.

    I might just disable the expand function (maybe a java alert) if the user is running any IE version but 8.x

    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You need to renest the <object> outside of the .mainbg div. Since the outer parent needs it you need to get the object outa there. Or else everything in there will be on top .

    I have to run to bed now since I'm already gonna get no sleep for tomorrows busy day, but hopefully someone else can chip in if you haven't gotten this solved
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


Bookmarks

Posting Permissions

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