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)

New User

5+ Year Member

joined:Aug 19, 2009
posts: 1
votes: 0

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)

Junior Member

10+ Year Member

joined:Aug 25, 2003
votes: 0

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


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members