Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with IE6 Layout



3:59 am on Aug 19, 2009 (gmt 0)

5+ Year Member

Hi, i'm trying to create a layout wherein the header and footer are absolutely positioned at the top and bottom of the browser respectively. The main content going in between the two.

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">
<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;}

<div class="container">
<div class="header">
<div id="bg_img">
<img id="header_img" alt="header" src="example/images/headerbg.jpg"/>
<div class="content">
<div id="background">
<img id="background_img" alt="background" src="example.com/images/plant_crop_sm.jpg"/>
<div class="content_container">
<div class="content_box" id="intro">
<div class="content_box_header" id="intro_header">
<div class="footer">
<img id="footer_img" alt="footer" src="example.com/images/footerbg2.jpg"/>
<div id="foot_nav">

Code validates and any help is much appreciated


2:35 pm on Aug 20, 2009 (gmt 0)

10+ Year Member

Fiddle with the following line of css:

.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;}


Featured Threads

Hot Threads This Week

Hot Threads This Month