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>