position absolute in IE5

R.Besseling

12-08-2006, 09:45 AM

Hello everyone,

I'm working on a community website at the moment and I have a problem with HTML/CSS. The height of content field of the website must resize with the browser without using 100%.

I used 'position: absolute' for this and it works fine with IE7, IE6 (with some JS in CSS), FireFox, Mozilla, Safari, Netscape and Opera 9. With Opera 7 and 8 it resizes with the resolution on the computer, but it doesn't when you make the browserwindow smaller. That's not a serios problem, because that will only affect a very small percentage of the visitors of my website (and I think it's a bug in Opera which I can't solve witout using percentages). The bigger problem is IE5 (3,2% of visitors in general). It doesn't display my webpage correct.

HTML

<!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" xml:lang="en-US" lang="en-US">
<html>
<head>
<title>Bridge beheer - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" http-equiv="language" content="nl">
<link rel="stylesheet" href="styles/main.css" type="text/css" />
</head>
<body>
<div id="main">Content
</div>
</body>
</html>

CSS

body
{
color: #000000;
font-size: 12px;
background: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
}

#main
{
width: 740px;
background-color: #FF0000;
position: absolute;
top: 0px;
bottom: 0px;
left: 50%;
margin-left: -370px;
}

* html #main
{
height: expression((parseInt( document.documentElement.clientHeight ))+'px');
}

Displaying correct with IE7 (http://www.cerus.nl/screen-ie7.gif)

Displaying incorrect with IE5 (http://www.cerus.nl/screen-ie5.gif)

As you can see I used the 'negative margin method' to center my main div, because 'margin: 0px auto' doesn't work with 'position: absolute'. I also used a CSS expression for IE6.

Does anyone know what I have to change in my code so that my website also displays in IE5 correct?

Thanks!

P.S. Sorry for the bad English, I am a proud Dutchie ;)

Excavator

12-08-2006, 09:52 AM

Hello R.Besseling,
Have a look at one I did and see if it works in as many browsers as you've tried. All I have to test in is IE6, IE7 and FF2.

http://www.nopeople.com/CSS/full_height_column/

R.Besseling

12-08-2006, 10:50 AM

Hi Excavator,

Thanks for your fast reply. Your solution also works in IE5, but that's because you used percentages.

I don't want to use percentages, because it will deform the webpage in my case. Here's a simple design (http://www.cerus.nl/general.gif) for the layout. Explanation:

The header must always be on top of the page (no margins).
The footer must always be on the bottom of the page (no margins).
The height of the content field must resize with the browser.
The other fields - header, footer, menu, submenu etc. - all have fixed pixel heights, so they don't resize.

The resize height of the content field is the tricky part. There are two divs that must resize: the outer / wrapper div (with the whole website in it) and the content div. If you use percentages (as you did in your example), it will overlap the footer if you resize the window.

Can you tell me how to make the content field to resize without using percentages in your example? - or - Can you tell me how to make the content field to resize with percentages without overlapping the footer?

Thanks!

yonni

12-08-2006, 11:02 AM

If you're planning on having a footer at the bottom of a page without using at least one table for layout you're going to have trouble. It is apparently possible, take a look at this example: http://scott.sauyet.com/CSS/Demo/FooterDemo1.html

But an easier option would be to have a single table that just holds the header in one cell, the footer in another and everything else in a middle cell. I know this messes up your nice css layout with nasty tables, but it works.

R.Besseling

12-08-2006, 02:01 PM

I agree that it makes more sense to use tables in this case. In fact, I already tried it before but IE still messed op my layout, so I switched back to divs.

I am redesigning it in tables again at and I have to say that I am pleased with the result so far. Somehow everything is displaying correct this time.
I guess sometimes it's necessary to use tables.

Thanks your reply Excavator and yonni!

Greetings