|
Posted by leskaPaul on 11/09/07 00:13
I'm stumped with a case of position: absolute behaving as expected in
firefox but not in IE6. Here are links to what it looks like:
firefox: http://www.flickr.com/photos/8270250@N06/1924432229/
ie: http://www.flickr.com/photos/8270250@N06/1925262398/
And here is the html followed by the css:
<html>
<head>
<link rel="stylesheet" type="text/css" href="templateModel.css"/>
</head>
<body>
<div id="containerWrapperOuter">
<div id="containerWrapperInner">
<div id="container">
<div id="outerBorderTopImage"> </div>
<img id="headerImage" src="mastheadFake.jpg"/>
<div id="main">
<div id="leftBar"><img src="sideImgFake.GIF"/></div>
<div id="contentWrapper">
<div id="content">
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
<p>Here is some text. The quick brown fox jumped over the lazy
dog.
That sentence is famous because it has all 26 characters of the
English alphabet.</p>
</div>
</div> <!-- end div 'contentWrapper' -->
</div> <!-- end div 'main' -->
<div id="outerBorderBottomImage"> </div>
<div id="footer"><img style="width: 698px" src="footerFake.jpg"/></
div>
</div> <!-- end div 'container' -->
</div> <!-- end div 'containerWrapperInner' -->
</div> <!-- end div 'containerWrapperOuter' -->
</body>
</html>
body {
text-align: center;
border: 2px blue solid;
}
#outerBorderTopImage {
visibility: visible;
background-color: yellow;
}
#outerBorderBottomImage {
visibility: visible;
background-color: purple;
}
#containerWrapperOuter {
visibility: visible;
background-image: url(outerVertGrad.jpg);
width: 800px;
margin-left: auto;
margin-right: auto;
}
#containerWrapperInner {
visibility: visible;
background-image: url(vertGradient.jpg);
width: 750px;
margin-left: auto;
margin-right: auto;
}
#container {
visibility: visible;
background-image: url(contentBg.jpg);
padding: 0px;
margin: 0px;
width: 698px;
margin-left: auto;
margin-right: auto;
}
#headerImage {
width: 698px;
height: 161px;
vertical-align: top;
padding: 0px;
margin: 0px;
}
#leftBar {
position: absolute;
width: 188px;
border: 1px red solid;
}
#contentWrapper {
margin-left: 188px;
background: url(bg_gradientTop.GIF) repeat-x #bccbc1;
background-position: top;
}
#content {
background: url(bg_gradientBottom.GIF) repeat-x;
background-position: bottom;
padding: 1px;
}
#footer {
width: 698px;
margin: 0px;
padding: 0px;
background-color: #f3f0e6;
padding-top: 20px;
}
Navigation:
[Reply to this message]
|