homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Problem with IE6 Layout

5+ Year Member

Msg#: 3974704 posted 3:59 am on Aug 19, 2009 (gmt 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



10+ Year Member

Msg#: 3974704 posted 2:35 pm on Aug 20, 2009 (gmt 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;}

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved