SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Design broken in IE7

    Have an issue where the header image looks correct in all other browsers in testing except when I go into compatibility mode in IE8, which I believe in that mode its showing in IE7? Well when I do that the header layout breaks. I think its a z-index issue but cant figure it out:

    Here is the html code:

    Code:
    <div id="content">
      <div id="content_header"></div>
      <div id="main_header" style="background:url('images/mainheader.jpg') no-repeat top center;">
        <div class="header_fade"></div>
      </div>
    </div>
    Here is the CSS:

    Code:
    body {
    text-align:center;
    background:#1d3f57 url('../images/site_bg.png') repeat-x top left;
    }
    
    #content {
    margin:0px auto;
    padding:0px 0px 0px 0px;
    position:relative;
    width:960px;
    min-height:600px;
    overflow:hidden;
    text-align:left;
    background:url('../images/site_header.png') no-repeat top left;
    }
    
    #content_header {
    text-align:left;
    margin:0px 25px 0px 25px;
    height:83px;
    overflow:hidden;
    }
    
    * html #content_header {
    height:83px;
    overflow:visible;
    }
    
    #main_header {
    border-left:2px #fff solid;
    border-right:2px #fff solid;
    height:342px;
    width:956px;
    position:relative;
    z-index:-1;
    }
    
    #main_header .header_fade {
    position:absolute;
    left:0px;
    bottom:0px;
    background:url('../images/header_fade.png') no-repeat bottom left;
    width:960px;
    height:49px;
    }
    Here are 2 screen shots, the first one shows it broken in compatibility mode, the second one shows it correctly:




    How it should look:


  2. #2
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update: I took position:relative out of the #content css property and now it seems to work in compatibility mode. But I want to make sure this is the correct way of doing this. Please let me know if this is a proper way of doing this or if there is a better way of doing this. Thanks!

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Without seeing the real page and images it's hard to say what's the best approach.

    By removing the position:relative from #content you will allow the negative z-index on #main_header to go behind #content instead of in front. If that's the effect that you wanted then yes that is one way to do it

    In IE6 and 7 an element with position:relative added automatically gets a z-index of zero and becomes atomic. No children can go under the background of a positioned parent unless that positioned parent is z-index:auto (the default for positioned elements). Unfortunately IE6 and 7 don't understand auto and instead apply a z-index of zero thus forever trapping their children inside that container.

    Hope that explains it and is relevant to your question


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
  •