Z-index problem in ie7 with fixed header element and transparency

I’ve mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn’t actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu.

http://bit.ly/f2a4rC

The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7.

I understand that a new stacking context is being created, but I’ve been unable to resolve this by fiddling with the z-index of the elements in question, or their parents. I know I can consolidate some of the extra divs used by the grid, but I’ve been unable to do so in a way that keeps the gradient and transparency effects.

How can I achieve this look in IE7?

Hi,

In IE7 an element is trapped by its positioned parent and cannot escape. You cannot interweave the children of positioned parents because ie7 and 6 incorrectly apply a z-index of zero to positioned elements when they should have applied auto.

There is no way to escape this other than not positioning the parent which in your case is not possible because you want it fixed.

You’d need to change the design and apply the gradient to another element and not the 100% high fixed element. That will allow the header to be separate form the content and then the content can go under the header.

Here’s a rough example but it does mean the gradient will scroll with the page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resume for James W. Fishwick</title>
<meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/resume.js"></script>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" />
<link rel="stylesheet" href="css/960_24_col.css" />
<link rel="stylesheet" href="css/resume.css" />
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent
}
body {
    line-height:1
}
ol, ul {
    list-style:none
}
blockquote, q {
    quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none
}
:focus {
    outline:0
}
ins {
    text-decoration:none
}
del {
    text-decoration:line-through
}
table {
    border-collapse:collapse;
    border-spacing:0
}
body {
    font:13px/1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif
}
a:focus {
    outline:1px dotted
}
hr {
    border:0 #ccc solid;
    border-top-width:1px;
    clear:both;
    height:0
}
h1 {
    font-size:25px
}
h2 {
    font-size:23px
}
h3 {
    font-size:21px
}
h4 {
    font-size:19px
}
h5 {
    font-size:17px
}
h6 {
    font-size:15px
}
ol {
    list-style:decimal
}
ul {
    list-style:disc
}
li {
    margin-left:30px
}
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
    margin-bottom:20px
}
.container_24 {
    margin-left:auto;
    margin-right:auto;
    width:960px
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
    display:inline;
    float:left;
    margin-left:5px;
    margin-right:5px
}
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11, .push_12, .pull_12, .push_13, .pull_13, .push_14, .pull_14, .push_15, .pull_15, .push_16, .pull_16, .push_17, .pull_17, .push_18, .pull_18, .push_19, .pull_19, .push_20, .pull_20, .push_21, .pull_21, .push_22, .pull_22, .push_23, .pull_23 {
    position:relative
}
.alpha {
    margin-left:0
}
.omega {
    margin-right:0
}
.container_24 .grid_1 {
    width:30px
}
.container_24 .grid_2 {
    width:70px
}
.container_24 .grid_3 {
    width:110px
}
.container_24 .grid_4 {
    width:150px
}
.container_24 .grid_5 {
    width:190px
}
.container_24 .grid_6 {
    width:230px
}
.container_24 .grid_7 {
    width:270px
}
.container_24 .grid_8 {
    width:310px
}
.container_24 .grid_9 {
    width:350px
}
.container_24 .grid_10 {
    width:390px
}
.container_24 .grid_11 {
    width:430px
}
.container_24 .grid_12 {
    width:470px
}
.container_24 .grid_13 {
    width:510px
}
.container_24 .grid_14 {
    width:550px
}
.container_24 .grid_15 {
    width:590px
}
.container_24 .grid_16 {
    width:630px
}
.container_24 .grid_17 {
    width:670px
}
.container_24 .grid_18 {
    width:710px
}
.container_24 .grid_19 {
    width:750px
}
.container_24 .grid_20 {
    width:790px
}
.container_24 .grid_21 {
    width:830px
}
.container_24 .grid_22 {
    width:870px
}
.container_24 .grid_23 {
    width:910px
}
.container_24 .grid_24 {
    width:950px
}
.container_24 .prefix_1 {
    padding-left:40px
}
.container_24 .prefix_2 {
    padding-left:80px
}
.container_24 .prefix_3 {
    padding-left:120px
}
.container_24 .prefix_4 {
    padding-left:160px
}
.container_24 .prefix_5 {
    padding-left:200px
}
.container_24 .prefix_6 {
    padding-left:240px
}
.container_24 .prefix_7 {
    padding-left:280px
}
.container_24 .prefix_8 {
    padding-left:320px
}
.container_24 .prefix_9 {
    padding-left:360px
}
.container_24 .prefix_10 {
    padding-left:400px
}
.container_24 .prefix_11 {
    padding-left:440px
}
.container_24 .prefix_12 {
    padding-left:480px
}
.container_24 .prefix_13 {
    padding-left:520px
}
.container_24 .prefix_14 {
    padding-left:560px
}
.container_24 .prefix_15 {
    padding-left:600px
}
.container_24 .prefix_16 {
    padding-left:640px
}
.container_24 .prefix_17 {
    padding-left:680px
}
.container_24 .prefix_18 {
    padding-left:720px
}
.container_24 .prefix_19 {
    padding-left:760px
}
.container_24 .prefix_20 {
    padding-left:800px
}
.container_24 .prefix_21 {
    padding-left:840px
}
.container_24 .prefix_22 {
    padding-left:880px
}
.container_24 .prefix_23 {
    padding-left:920px
}
.container_24 .suffix_1 {
    padding-right:40px
}
.container_24 .suffix_2 {
    padding-right:80px
}
.container_24 .suffix_3 {
    padding-right:120px
}
.container_24 .suffix_4 {
    padding-right:160px
}
.container_24 .suffix_5 {
    padding-right:200px
}
.container_24 .suffix_6 {
    padding-right:240px
}
.container_24 .suffix_7 {
    padding-right:280px
}
.container_24 .suffix_8 {
    padding-right:320px
}
.container_24 .suffix_9 {
    padding-right:360px
}
.container_24 .suffix_10 {
    padding-right:400px
}
.container_24 .suffix_11 {
    padding-right:440px
}
.container_24 .suffix_12 {
    padding-right:480px
}
.container_24 .suffix_13 {
    padding-right:520px
}
.container_24 .suffix_14 {
    padding-right:560px
}
.container_24 .suffix_15 {
    padding-right:600px
}
.container_24 .suffix_16 {
    padding-right:640px
}
.container_24 .suffix_17 {
    padding-right:680px
}
.container_24 .suffix_18 {
    padding-right:720px
}
.container_24 .suffix_19 {
    padding-right:760px
}
.container_24 .suffix_20 {
    padding-right:800px
}
.container_24 .suffix_21 {
    padding-right:840px
}
.container_24 .suffix_22 {
    padding-right:880px
}
.container_24 .suffix_23 {
    padding-right:920px
}
.container_24 .push_1 {
    left:40px
}
.container_24 .push_2 {
    left:80px
}
.container_24 .push_3 {
    left:120px
}
.container_24 .push_4 {
    left:160px
}
.container_24 .push_5 {
    left:200px
}
.container_24 .push_6 {
    left:240px
}
.container_24 .push_7 {
    left:280px
}
.container_24 .push_8 {
    left:320px
}
.container_24 .push_9 {
    left:360px
}
.container_24 .push_10 {
    left:400px
}
.container_24 .push_11 {
    left:440px
}
.container_24 .push_12 {
    left:480px
}
.container_24 .push_13 {
    left:520px
}
.container_24 .push_14 {
    left:560px
}
.container_24 .push_15 {
    left:600px
}
.container_24 .push_16 {
    left:640px
}
.container_24 .push_17 {
    left:680px
}
.container_24 .push_18 {
    left:720px
}
.container_24 .push_19 {
    left:760px
}
.container_24 .push_20 {
    left:800px
}
.container_24 .push_21 {
    left:840px
}
.container_24 .push_22 {
    left:880px
}
.container_24 .push_23 {
    left:920px
}
.container_24 .pull_1 {
    left:-40px
}
.container_24 .pull_2 {
    left:-80px
}
.container_24 .pull_3 {
    left:-120px
}
.container_24 .pull_4 {
    left:-160px
}
.container_24 .pull_5 {
    left:-200px
}
.container_24 .pull_6 {
    left:-240px
}
.container_24 .pull_7 {
    left:-280px
}
.container_24 .pull_8 {
    left:-320px
}
.container_24 .pull_9 {
    left:-360px
}
.container_24 .pull_10 {
    left:-400px
}
.container_24 .pull_11 {
    left:-440px
}
.container_24 .pull_12 {
    left:-480px
}
.container_24 .pull_13 {
    left:-520px
}
.container_24 .pull_14 {
    left:-560px
}
.container_24 .pull_15 {
    left:-600px
}
.container_24 .pull_16 {
    left:-640px
}
.container_24 .pull_17 {
    left:-680px
}
.container_24 .pull_18 {
    left:-720px
}
.container_24 .pull_19 {
    left:-760px
}
.container_24 .pull_20 {
    left:-800px
}
.container_24 .pull_21 {
    left:-840px
}
.container_24 .pull_22 {
    left:-880px
}
.container_24 .pull_23 {
    left:-920px
}
.clear {
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0
}
.clearfix:after {
    clear:both;
    content:' ';
    display:block;
    font-size:0;
    line-height:0;
    visibility:hidden;
    width:0;
    height:0
}
* html .clearfix, *:first-child+html .clearfix {
    zoom:1
}
</style>
<style>
body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
    font-size: 14px;
    color: black;
}
/* TWITTER */
#tweet {
    background-color:#000000;
    width: 100%;
    line-height: 2em;
    vertical-align: middle;
    color: #EEEEEE;
    position: absolute;
    z-index: 60;
}
#tweet a {
    color: #ff0000;
}

/* FONTS */

@font-face {
 font-family: 'Maus';
 src: url('/fonts/maus____-webfont.eot');
 src: local('Maus'), local('Maus'), url('/fonts/maus____-webfont.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
.Maus {
    font-weight: normal;
    font-style: normal;
    line-height:normal;
    font-family: 'Maus', sans-serif;
}
/* HEADERS */

h1 {
    color: #fff;
    font-size: 74pt;
    letter-spacing: 5pt;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 100px !important;
}
/* CONTENT */

#upper {
    left:0;
    position:fixed;
[B]    width: 100%;
    z-index:2;[/B]
}
[B]#outer {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #ccc, #fff); /* for firefox 3.6+ */
    background-color: #ccc; /* no CSS# */
    width:100%;
}[/B]
#headerwrap {
    padding-top: 60px;
    position: relative;
[B]    z-index: 40;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #ccc, #fff); /* for firefox 3.6+ */
    background-color: #ccc; /* no CSS# */
}[/B]
#header .grid_11 {
    position: relative;
    height: 100px;
}
#header .grid_11 p {
    position: absolute;
    bottom: 0;
    left: 0;
}
#content {
    top: 250px;
    background-color: #FFF;
   [B] position: relative;
    z-index: 1;[/B]
}
div.grid_20 {
    overflow-x: hidden;
    overflow-y: auto;
}
/* MENU */
ul#menu {
    z-index: 40;
    border-top: solid 10px #000011;
    display:block;
    margin: 0;
    padding:0 0 35px 0;
    vertical-align:middle;
    white-space:nowrap;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.85);
    width: 960px;
    position: relative;
}
ul#menu li {
    list-style: none;
    float: left;
    text-align:center;
    vertical-align:top;
}
ul#menu li:first-child {
    margin-left: 0;
}
ul#menu a {
    font-weight: bold;
    color: #000011;
    text-decoration: none;
    min-height:18px;
    overflow:visible;
    padding:7px 5px;
}
ul#menu a:hover {
    color: #FFF;
    background-color: #000011;
}
/*ul#menu a:hover, ul#menu a:active, ul#menu a:link, ul#menu a:visited {
color: inherit;
}*/

span.bumpy-char {
    position: relative;
    line-height: 1em /* Required for IE8. Without this, the text can disappear as it rises. Experiment until you find a large enough number. */
}
</style>
</head>
<body>
[B]<div id="outer">[/B]
    <div id="upper">
        <div id="tweet">
            <div class="container_24 clearfix">
                <div class="grid_11 prefix_13 omega"> blah blah blah: <a href="http://960.gs/">960 Grid System</a> </div>
            </div>
        </div>
        <div class="container_24 clearfix" id="headerwrap">
            <h1 class="Maus grid_13">Fishwick</h1>
            <div class="grid_11">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sapien elit, sodales non tempus a, ultricies sit amet erat. Nunc vitae ipsum enim. Cras tincidunt tempor accumsan. Integer ut libero dui, quis vehicula ante.</p>
            </div>
        </div>
        <div class="container_24 clearfix">
            <ul id="menu" class="grid_24">
                <li><a href="#about">About</a></li>
                <li><a href="#caps">Capabilities</a></li>
                <li><a href="#exp">Experience</a></li>
                <li><a href="#use">Use Cases</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="container_24 clearfix" id="content">
        <div class="grid_20 prefix_2 suffix_2">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
        </div>
    </div>
</div>
<!-- end .container_24 -->
</body>
</html>


thanks Paul, this is great! Appreciate the explanation and your taking a stab at it.

The grid system I used to help plot layout doesn’t really make a lot of semantic sense, so I’m going to re-factor and use your example to guide me once my markup is a little simpler.