Announcement

**vikram1vicky** · Sep 10, 2011, 05:03 AM

Use positioning to fix it

**ArtfulAllen** · Sep 10, 2011, 05:31 AM

Originally posted by vikram1vicky View Post

Use positioning to fix it

That was my first impression as well. At first I set the "wrapper" div to relative and then set the "logo" div to absolute. I also experimented with numerous other combinations of positioning with no success. Again, I apologize if I'm seeming particularly dense with all this. What specific positioning do you recommend?

Thanks for your patience!

**vikram1vicky** · Sep 10, 2011, 05:48 AM

Try following code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#contentbackground {
    background:#aaa;
    padding-top: 5px;
    position:relative;
    height:auto;
}
#logo {
    background: url(../_images/logo.png) no-repeat;
    height: 325px;
    width: 428px;
    margin:0 auto;
    z-index:2;
    position:absolute;
    left:20px;
    top:0;
}
#hamster {
    height: 275px;
    width: 400px;
    margin:0 auto;
    z-index:0;
    position:absolute;
    left:20px;
    top:0;
}
#checkback {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 95%;
    font-weight: bold;
    text-align: center;
    padding: 15px;
    margin-bottom: 125px;
}
</style>
</head>

<body>

        
        <div id="contentbackground">
            <div id="logo"></div>
            <div id="hamster"><object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?up_eyeColor=000000&up_foodColor=BD9E20&up_earColor=BFB58E&up_tailColor=D9D1B0&up_wheelSpokeColor=A6A6A6&up_bgColor=F0F0F0&up_snoutColor=F7F4E9&up_feetColor=BFB58E&up_bodyColor=D4CAA5&up_wheelOuterColor=AB3232&up_waterColor=E0EFFF&up_wheelColor=CFCFCF&up_wheelCenterColor=DAE02F&" width="370" height="275"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?up_eyeColor=000000&up_foodColor=BD9E20&up_earColor=BFB58E&up_tailColor=D9D1B0&up_wheelSpokeColor=A6A6A6&up_bgColor=F0F0F0&up_snoutColor=F7F4E9&up_feetColor=BFB58E&up_bodyColor=D4CAA5&up_wheelOuterColor=AB3232&up_waterColor=E0EFFF&up_wheelColor=CFCFCF&up_wheelCenterColor=DAE02F&"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object></div>
          <div id="text">
            <p id="checkback">Subtext goes here.</p></div>
            </div>
            
</body>
</html>

**ArtfulAllen** · Sep 10, 2011, 06:21 AM

Originally posted by vikram1vicky View Post

Try following code:

Thanks for the prompt reply. You had changed the positioning on #hamster and #logo to absolute, yes? Sadly that didn't seem to do the trick for me. IE is still showing the flash file overlapping the logo, even though Chrome and FF are working as intended. I have noticed that when I remove the DOCTYPE code at the top of my html document that IE will actually overlap like I want it to. Sadly, removing the DOCTYPE clarification throws the rest of the site out of wack. In addition, it wouldn't be valid to not include the DOCTYPE. Not sure if that info helps at all or not, but figured I'd mention it.

Surely there must be a way though. For the life of me I simple can't figure it out.

EDIT:

I've uploaded a test page of the site to show what I'm talking about specifically. Obviously the site is a work in progress but in Chrome and FF the logo overlaps the flash, but not in IE. I'm thoroughly stumped.

http://www.thedeadhamster.com/test.htm

EDIT EDIT:

Been doing some additional research into this and it seems that in order for .swf files to follow normal Z-index rules you have to put <param name="wmode" value="opaque" /> in the .swf object code. As it turns out, I do have that in there. Additional research seems to indicate that this fix works in older versions in IE but not the latest. How frustrating. Surely there's a way.

**vikram1vicky** · Sep 10, 2011, 09:15 AM

I just tested on IE7 it works fine here

**ArtfulAllen** · Sep 11, 2011, 02:02 AM

Originally posted by vikram1vicky View Post

I just tested on IE7 it works fine here

Got the issue resolved. I kept reading everywhere that .swf files always overlap other items and divs regardless of z-index or positioning. Apparently a way to get around that and make the z-index apply is to set a .swf parameter of "wmode" to "opaque". However, having done that my z-index still wouldn't work in IE though they were working fine in all other browsers.

As it turns out, that fix works only in IE 7 and earlier. IE 8 and IE 9 (of which I'm using IE 9) do not respect that parameter and thus it's impossible to get .swf files to layer correctly with z-index. To get around this I added a meta tag at the beginning of my HTML document to run the page in compatibility mode for IE 7. Works like a charm and doesn't alter any of the rest of my document. The z-index of the .swf is now working as expected! The meta tag I added in was as follows:

Code:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Announcement

Z-index Issues with IE

Z-index Issues with IE

Comment

Comment

Comment

Comment

Comment

Comment