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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Z-index Issues with IE

    Hello all!

    I've been lurking in these forums for a good while as I've recently started dabbling in web design. As such, I find myself stumped. Despite my relatively thorough search on Z-index bugs with Internet Explorer I've yet to find anything that solves my issue, though I've tried a good handful of suggested solutions.

    I've got a site where I have a logo followed by an embedded flash file. I'd like the logo to slightly overlap the flash file. This works beautifully in both Chrome and FF, though as the story seems to go it has problems in IE and stacks behind the flash file. Am I missing something seemingly obvious to get this to work correctly? The applicable code is below:

    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>Site Title</title>
    <link href="_css/main.css" rel="stylesheet" type="text/css" media="screen, projection" />
    </head>
    
    <body>
    
    <div id="wrapper">
    		<div id="header"></div>
            <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
    Here are the applicable CSS codes:

    Code:
    #wrapper {
    	position: relative;
    	padding: 0;
    	width: 985px;
    	margin: 0 auto;
    }
    #header {
    	background: url(../_images/header.jpg);
    	height: 36px;
    	width: 985px;
    }
    #contentbackground {
    	background: url(../_images/contentbackground.jpg) repeat;
    	padding-top: 5px;
    }
    #logo {
    	background: url(../_images/logo.png) no-repeat;
    	height: 325px;
    	width: 428px;
    	margin-right: auto;
    	margin-left: auto;
    	z-index: 5;
    	position: absolute;
    }
    #hamster {
    	height: 275px;
    	width: 400px;
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: -40px;
    	z-index: -5;
    }
    #checkback {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 95%;
    	font-weight: bold;
    	text-align: center;
    	padding: 15px;
    	margin-bottom: 125px;
    }
    I've been battling with this for about three hours now and while I'm certain the solution is likely very simple I'm really stumped. Any help would be greatly appreciated. Thanks so much to anyone who has suggestions. Cheers!



    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
    Last edited by ArtfulAllen; 09-10-2011 at 12:13 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Use positioning to fix it

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote 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!

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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>

  • Users who have thanked vikram1vicky for this post:

    ArtfulAllen (09-16-2011)

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote 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.
    Last edited by ArtfulAllen; 09-10-2011 at 01:19 PM.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    I just tested on IE7 it works fine here

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote 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" />


  •  

    Posting Permissions

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