Forum Moderators: not2easy
I've accomplished this on firefox without resorting to fixed positioning. IE6 will render the header and footer, but not the content. Can't quite wrap my head around this one and was hoping someone would be kind enough to point me in the right direction.
code that works in firefox but not ie is as follows:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site Name</title>
<style type="text/css">
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;font-size: 100%;vertical-align: baseline;border: 0;outline: 0;background: transparent;}
.container {background:#000;font: 100% Arial, Helvetica, sans-serif;padding: 0;}
.content {background-repeat:no-repeat;bottom:60px;overflow:auto;position:absolute;top: 100px;color:#FFF;width: 100%;}
.header {background:#33ccff;height: 90px;position:absolute;top: 0;}
#bg_img {height: 90px;overflow:hidden;}
#header_img {width:100%;}
.content_container {left:0;position:absolute;top:0;}
.footer {background: #000;bottom: 0;height: 50px;overflow:hidden;position:absolute;}
#footer_img {width:100%;}
#background_img {position:absolute;width:100%;}
.content_box {color:#FFF;margin: 50px 0 10px 50px;padding: 20px;width: 480px;}
.content_box_header {border-bottom: 3px solid;height: 30px;margin-bottom: 20px;padding-right:10px;text-align: right;}
#intro {background-color:#F06;text-align:center;}
#intro_header {background-color:#F00;border-bottom-color:#C00;}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div id="bg_img">
<img id="header_img" alt="header" src="example/images/headerbg.jpg"/>
</div>
</div>
<div class="content">
<div id="background">
<img id="background_img" alt="background" src="example.com/images/plant_crop_sm.jpg"/>
</div>
<div class="content_container">
<div class="content_box" id="intro">
<div class="content_box_header" id="intro_header">
<h1>Intro</h1>
</div>
</div>
</div>
</div>
<div class="footer">
<img id="footer_img" alt="footer" src="example.com/images/footerbg2.jpg"/>
<div id="foot_nav">
</div>
</div>
</div>
</body>
</html>
Code validates and any help is much appreciated
.content {background-repeat:no-repeat;bottom:60px;overflow:auto;position:absolute;top: 100px;color:#FFF;width: 100%;}
The below line has been altered already, swap this for the original line and try tweaking it to your needs:
.content {background-repeat:no-repeat;bottom:60px;
position:absolute;top: 100px;color:#FFF;width: 100%; height: 400px; overflow: auto;}
