SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    Pearland, TX
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE layout height issue continues to plague me

    I have been trying to remember how to create layouts in CSS and I began to experiment with the template below. In its current form it tests well in both Firefox and IE, but when I began to add DIVs and paragraphs in the content area between the header and footer, there is a difference in height from the bottom of the text to the top of the footer.

    For example I took a screenshot and in Mozilla it's 385 pixels between content and footer. But in IE it's 435 pixels! What's the best way to solve this height issue without using javascript hacks?

    Here's the original template:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>sample</title>
    <style type="text/css">
    	body, html{
    		height:100%;
    		text-align:center;
    		margin:0px;
    		padding:0px;
    	}
    	#main,#header,#footer,#cleaner{
    		margin-left:auto;
    		margin-right:auto;
    		width:800px;
    		text-align:left;
    	}
    	#main{
        /*this height is for ie only*/
    		height:100%;
    		min-height:100%;
    		margin-bottom:-50px;
    	}
      /*ie wont see this, other browsers will*/
    	body>div#main{
    		height: auto;
    	}
    	#header, #footer,#cleaner{
    		height:50px;
    	}
    	/*Here is some visual stuff that is not needed*/
    	body{background:#ffffff;}
    	#main{background:#EEEEEE;}
    	#header, #footer{background:#DDDDDD;}
    </style>
    </head>
    <body>
    <div id="main">
      <div id="header">header</div>
      Content<br />
      <br /> 
      The purpose of this test page is to get content area 100% height of the viewable area, unless the content is longer, in which case the container should expand.<br />
      <br />
      This can be tested by looking at this page with small content (the grey area should be 100% high)<br />
      And then making the browser smaller so that it can be scrolled (the text at the light grey area should stay above darker gray area)<br />
      <br />  
      This page has been tested in folloving browsers in winxp succesfully:<br />
      IE 5.0, IE 5.5, IE 6.0, Netscape 7.1, Mozilla Firebird 0.7, Opera 7.22, MyIE2 0.8.2070<br />
      <br />
      Known problems: In IE, the footer is 1px away from the page bottom. In Opera the page bottom is not updated unless the page is refreshed. (It still works like it is wanted, it just does not update the height on the fly.)<br />
      <br />
      This text should be above the footer at all times.
      <div id="cleaner"></div>
    </div>
    <div id="footer">footer</div>
    </body>
    </html>
    Thanks

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi samsoner,

    What your looking for is known as a "Sticky Footer" layout.

    See the FAQ for in depth details on making it cross browser compatible.

    How do you put a sticky footer at the bottom of the window?


    The page was recently updated with notes for catering to Opera 11 and previous versions if they need to be supported.

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    Pearland, TX
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur! I remember the sticky footer a few years back, but will it solve the height issue between IE and Mozilla?

    It seems that whenever I use <br> or <div> within the content area between the header and footer it throws the height difference off by 50-100 pixels.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Known problems: In IE, the footer is 1px away from the page bottom. In Opera the page bottom is not updated unless the page is refreshed. (It still works like it is wanted, it just does not update the height on the fly.)
    Hi,
    That quote is from your test code.

    The 1px at the bottom you are seeing in IE is a border on the browser chrome. You will see that with any page that is 100% height or goes below the fold.
    In Opera the page bottom is not updated...
    Actually IE8 suffered from the same problem too, those fixes were included in the working sticky footer in the FAQ. Opera 11 has corrected the issue but to support older versions of Opera the fix must be left in place as well as adding clear:both to the main container.

    http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm

    Have you tried using that code from the FAQ yet?


Bookmarks

Posting Permissions

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