Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Location
    The Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer position absolute in IE5

    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
    Code:
    <!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
    Code:
    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

    Displaying incorrect with IE5

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Location
    The Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 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!
    Last edited by R.Besseling; 12-08-2006 at 10:53 AM.

  • #4
    New Coder
    Join Date
    Jul 2005
    Posts
    77
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Location
    The Netherlands
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •