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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer 100% height with footer and header, FF/Safari/Opera are ok, not IE!!

    I'm designing a site with 100% height, and which has fixed height header/footer. Firefox/Safari/Opera interpret the code just fine, but not IE. I've been trying to solve this for whole day, couldn't figure it out and need help. Thanks in advance!



    Here are few screenshots, and the source code.

    Firefox:


    Safari:


    Opera:


    IE, THE problem!



    PHP 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" lang="en">
    <
    head>
    <
    title>Page</title>
    <
    meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <
    style type="text/css">
    html,body {
        
    height100%;
        
    margin0px;
        
    padding:0px;
        
    font-familyverdana;
        
    font-size12px;
        
    backgroundred;
    }

    #page {
        
    padding0px;
        
    margin0px;
        
    width100%;
        
    height100%;
        
    border-width0px;
    }

    #page .td0 {
        
    height60px;
        
    text-aligncenter;
        
    vertical-alignmiddle;
        
    background-colororange;
    }

    #page .td1 {
        
    width170px;
        
    padding3px;
        
    text-aligncenter
        
    vertical-aligntop;
        
    background-colorlightgreen;
    }

    #page .td2 {
        
    padding3px;
        
    text-aligncenter;
        
    vertical-aligntop;
        
    background-colorlightgreen;
    }

    #page .td3 {
        
    width170px;
        
    padding3px;
        
    text-aligncenter
        
    vertical-aligntop;
        
    background-colorlightgreen;
    }

    #page .td4 {
        
    height20px;
        
    text-aligncenter;
        
    vertical-alignmiddle;
        
    background-colororange;
    }
    </
    style>
    </
    head>

    <
    body>
    <
    table id="page">
        <
    tr>
            <
    td class="td0" colspan=3>header</td>
        </
    tr>
        <
    tr>
            <
    td class="td1">left</td>
            <
    td class="td2">page</td>        
            <
    td class="td3">right</td>
        </
    tr>
        <
    tr class="tr2">
            <
    td class="td4" colspan=3>footer</td>
        </
    tr>
    </
    table>
    </
    body>
    </
    html

    PS: as a side question, how can i get rid of those red borders around each TD?

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    I've redone it for you mate, but I have a few questions. Do you want the footer to be at the bottom of the window regardless of how much content there is?
    Do you want any space between left, center and right?

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    as far as i know, your going to have to change the doctype and throw IE into quirks mode to make it play along. Removing the tables and doing it through css lets you keep the pretty strict doctype.

    http://ryanfait.com/sticky-footer/
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Blue_Jeans View Post
    I've redone it for you mate, but I have a few questions. Do you want the footer to be at the bottom of the window regardless of how much content there is?
    Do you want any space between left, center and right?
    no, if the page contents is long then footer should go below everything...
    basically, footer is where i'm putting the company name and copyright info...

    and about the spacing, a "no" as well

    Thanks for the fast answer!
    Last edited by frifox; 10-01-2007 at 11:09 PM.

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Mate, you can get rid of the spacing if you want, it's just specified in the margin, but I think it needs it, you'll see why in the example:
    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" lang="en">
    <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <style type="text/css">
    html
    {
    	overflow: auto;
    }
    body {
        margin: 0;
        padding:0;
        font-family: verdana;
        font-size: 12px;
        background: white;
    }
    #page {
    	padding: 3px;
    	width: 974px;
    	margin: 0 auto;
    }
    
    #header
    {
    	width: 100%;
    	text-align: center;
    	background-color: orange;
    	margin: 3px 0;
    }
    #left, #center, #right
    {
    	text-align: center;
        background-color: lightgreen;
    }
    #left
    {
    	float:left;
    	width: 20%;
    }
    #center
    {
    	width: 59.5%;
    	margin: 0 auto;
    }
    #right
    {
    	float: right;
    	width: 20%;
    }
    #content-left, #content-center, #content-right, #content-header, #content-footer
    {
    	padding: 15px;
    }
    #footer
    {
    	background-color: orange;
    	width:100%;
    	margin: 3px 0 0;
    	text-align: center;
    }
    p
    {
    	padding: 0;
    	margin: 0;
    }
    .clear
    {
    	clear: both;
    }
    </style>
    </head>
    
    <body>
    	<div id="page">
    		<div id="header">
    			<div id="content-header">
    				<p>Header</p>
    				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    			</div>
    		</div>
    		<div id="right">
    			<div id="content-right">
    				<p>Right</p>
    				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    			</div>
    		</div>
    		<div id="left">
    			<div id="content-left">
    				<p>Left</p>
    				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    			</div>
    		</div>
    		<div id="center">
    			<div id="content-center">
    				<p>Center</p>
    				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    			</div>
    		</div>
    		<div class="clear"></div>
    		<div id="footer">
    			<div id="content-footer">
    				<p>Footer</p>
    				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks! i'll see if i can fit it in my site...

    i think i misunderstood your question, i thought you were asking if i want a footer that is fixed to the bottom of the screen regardless whether the page is scrolling or not... what i needed is a footer which is sticky on the bottom, BUT if the page is large and requires scrolling, the footer is pushed farther - below the viewing window

    btw i'm redoing a http://golosmira.com site (i know it SUCKS, my dad designed it and it is FULL of errors and garbage lol)

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    I'm just working out kinks, now that I know what you are kind of going for, I can help you better.

  • #8
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Edit: I had it working, but I messed something up, I'm looking for my mistake.
    Edit2: Fixed.
    It is practically impossible to stretch the content automatically to the bottom of the page without tables, but believe me, you DO NOT want to use tables.

    Here you go, mate, I expect a thanks out of this, I've spent a lot of time on it,
    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" lang="en">
    <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <style type="text/css">
    html
    {
    	overflow: auto;
    }
    body {
    	margin: 0;
    	padding:0;
    	width: 100%;
    	font-family: verdana;
    	font-size: 12px;
    	background: white;
    }
    #page {
    	padding: 0;
    	width: 100%;
    	margin: 0;
    	display: block;
    	min-height:100% !important;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 0;
    }
    #content-page
    {
    	padding: 0 0 50px;
    	width: 100%;
    	margin: 0;
    }
    #header
    {
    	width: 100%;
    	text-align: center;
    	background-color: orange;
    	margin: 0;
    }
    #left, #center, #right
    {
    	text-align: center;
        background-color: lightgreen;
    }
    #left
    {
    	float:left;
    	width: 20%;
    }
    #center
    {
    	width: 60%;
    	margin: 0 auto;
    }
    #right
    {
    	float: right;
    	width: 20%;
    }
    #content-left, #content-center, #content-right, #content-header
    {
    	padding: 15px;
    }
    #footer
    {
    	background-color: orange;
    	text-align: center;
    	position: absolute;
    	left: 0;
    	bottom: 0px;
    	width: 100%;
    	display: block;
    	height: 50px;
    	z-index: 10;
    	padding: 0;
    	margin: 0;
    }
    p
    {
    	padding: 0;
    	margin: 0;
    }
    .clear
    {
    	clear: both;
    }
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    #page
    {
    height: 100%;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    	<div id="page">
    		<div id="content-page">
    			<div id="header">
    				<div id="content-header">
    					<p>Header</p>
    					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    				</div>
    			</div>
    			<div id="right">
    				<div id="content-right">
    					<p>Right</p>
    					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    				</div>
    			</div>
    			<div id="left">
    				<div id="content-left">
    					<p>Left</p>
    					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    				</div>
    			</div>
    			<div id="center">
    				<div id="content-center">
    					<p>Center</p>
    					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    				</div>
    			</div>
    			<div class="clear"></div>
    			<div id="footer">
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    Or a hotlink.
    Note: the hotlink uses a centered style, the posted code gives full page.
    Last edited by Blue_Jeans; 10-02-2007 at 03:36 AM.

  • Users who have thanked Blue_Jeans for this post:

    frifox (10-02-2007)

  • #9
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    unfortunately there are things that i need which simply cant be done with divs... oh well, i guess i'll have to stick with tables...

    btw, i've noticed that if i lower doctype to html 3 or completely remove it, IE renders the page just fine i guess i'll have php code that will do that only if IE6 is detected... for IE7 i found a lil hack that works, which i'll implement with php as well...
    The Power of PNG - http://windenis.com (my site)

  • #10
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    lol... things that can't be done with divs for layouts shouldn't be done at all, mate. Could you specify what it is "can't be done"? Maybe you just don't know how to do it and someone here does.

    Designing with tables is a thing of the past, man. Get it out of your system. Use divs, if you want help, I have a lot of time to help you convert. That's all I've been doing for the last two weeks anyways, converting table layouts of friends to divs. When all is said and done, they love it.

  • #11
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hey, dont worry... i'm not against divs, i'm just new to them though yeah, i've been using tables for AT LEAST past 6 years, and i'm simply too used to them....

    i liked the last code which you provided but the things i miss....
    1. having the left and right columns extend all the way to the footer all the time, no matter how long/short the middle one is... simply thats because i want side columns with different background than the middle (either a color, or a background png).

    2. when i resize the page, with divs - the right div might slip below the left one, the center div is misplaced, and the middle content might slip under left/right columns etc. with tables this simply doesnt happen. everything is FIXED like i want it to be

    3. there are other few things, but i think the two above are the main ones that keep me from divs...


    if the above CAN be done with divs, i'll fully move to divs and will convert others to do the same as well lol
    The Power of PNG - http://windenis.com (my site)

  • #12
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    oh and also... maybe a myth but here it is: i heard that content inside the DIV will not show up untill ALL the content is downloaded from the server. which implies that tables will show up faster.... is this true?
    The Power of PNG - http://windenis.com (my site)


  •  

    Posting Permissions

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