homepage Welcome to WebmasterWorld Guest from 54.166.148.189
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, Moderator: open

CSS Forum

    
Problem with IE6 Layout
Elemenopee




msg:3974706
 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">
<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

 

PSWorx




msg:3975656
 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