Firefox 100% height problems

@RabBellMay 05.2008

Kinda done this page the wrong way round, it works in IE but not firefox (I always do it the other way around, I think doing it the wrong way might be whats gort me stumped this time).

Anyway I have a div called footer which I want at the bottom of the page.
Just above the footer div is a div called centralcontent. Centralcontent uses height:100% to make sure the footer is at the bottom of the page.

I then subtract 50px from centralcontents margin so the footer is on the page. Problem is the centralcontent in IE is showing as 100%, but not in firefox

Here is the XHTML code

[code=php]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” > <head runat=”server”> <title>Test</title> <link rel=”stylesheet” type=”text/css” href=”stylesheet.css” /> </head> <body> <form id=”form1″ runat=”server”> <div id=”centralcontent”> <div id=”topbanner”> <div class=”nav”> <ul> <li><a href=”loginreg/login.aspx”>Play the Game</a></li> <li><a href=”howtoplay.aspx”>How To Play</a></li> <li><a href=”prizes.aspx”>Prizes</a></li> <li><a href=”faq.aspx”>FAQ</a></li> <li><a href=”http://www.google.com” target=”_blank”>Google</a></li> <li><a href=”termsconditions.aspx”>T & C</a></li> <li><a href=”privacy.aspx”>Privacy</a></li> <li class=”noborder”><a href=”contactus.aspx”>Contact Us</a></li> </ul> </div> </div> <div id=”rssbanner”> <div id=”feedbanner” class=”feedbar” runat=”server”> TESTING FEED BANNER </div> <div id=”datebar” class=”datebar” runat=”server”> </div> </div>

<div id=”content”> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget nulla sit amet quam auctor consectetuer. Duis at sem. Etiam cursus semper augue. Aenean est nulla, egestas id, semper a, auctor dictum, metus. Pellentesque risus mi, eleifend sit amet, iaculis id, auctor vel, arcu. Integer commodo lacus. Phasellus eget velit in massa pulvinar dapibus. Etiam quis nisl nec pede placerat blandit. Fusce ante dolor, hendrerit ut, lacinia quis, ultricies nec, est. Maecenas mattis, metus non malesuada pharetra, sapien sem rutrum elit, ut sollicitudin enim ipsum ut risus. Vivamus mi elit, blandit vel, sollicitudin sed, pharetra et, leo. Donec sed dui eget odio tempor feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas malesuada ligula eu lacus. Suspendisse scelerisque urna eu urna. Etiam mattis dignissim tellus. Maecenas diam metus, lacinia tincidunt, auctor eu, consequat nec, dolor. Donec mollis dignissim metus.</p>

</div> <br class=”clear_spacing” /> </div>

<div id=”footer”> HI </div> </form> </body> </html>[/code]

And I’ve attached the CSS file (as a text file).

Any help offered is a big help. This is part of a big project, I’m on a tight deadline and this is beginning to take up too much of my time. Like I say, appreciate any help.

Thanks ?

~~[upl-file uuid=06ed54a2-291e-4814-8eaf-e95ce3973619 size=6kB]~~StyleSheet.txt[/upl-file]

to post a comment

CSS

10 Comments(s) _↴

@WebJoelMay 05.2008 — #I am probably looking right at the problem and not knowing it, -but I do not see any difference between IE7 and Fx 2.0.0.14. -Is this an IE[B]6[/B] problem?

IE has a terrible time understand "height:100%;" on any container unless the parent element also has "height:100%;" ( [B]html, body {height:100%;}[/B] ....)

@RabBellauthorMay 05.2008 — #In IE7 on my machine the red background div called footer is on the bottom of the page as it should be. On Firefox it is halfway up the page.

Is it just me that's having this problem or is anyone else seeing the same as me?

(Screenshots attached)

[upl-file uuid=199e49a9-f290-4d6a-a5bf-8b687311facb size=29kB]ieshot.jpg[/upl-file]

[upl-file uuid=72c84b28-0741-45c7-8cc2-ed6552787c1c size=30kB]ffshot.jpg[/upl-file]

@RabBellauthorMay 05.2008 — #never mind, the designer has said he doesn't mind in the footer is halfway up the page in FF. So long as I tidy up the content with some padding, he's happy.

So, problem avoided...not fixed, avoided ?

@CentauriMay 05.2008 — ##centralcontent has to be a [B]direct[/B] child of the body for this to work - 100% min-height is refered to the height of the parent, and in your case the parent is the form which does not have a set height. Move the form inside #centralcontent, and the min-height should work fine.

@ScriptageMay 05.2008 — #The footer doesn't render correctly in IE either; you'd be better off with proper nesting:

[code=php]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 <html xmlns="http://www.w3.org/1999/xhtml" > 
 <head runat="server"> 
 <title>Test</title> 
 
 <style type="text/css">
 
 body {
 margin:0px;
 padding:0px;
 text-align: center;
 min-width: 700px;
 }
 
 .container {
 text-align: left;
 width: 700px;
 height:600px;
 margin-left: auto;
 margin-right: auto;
 border: 5px solid navy;
 border-top-style:none;
 border-bottom-style:none;
 }
 
 .header{
 height:170px;
 width:700px;
 background-color:silver;
 
 }
 
 .navigation{
 height:40px;
 width:700px;
 background-color:silver;
 font-color:white;
 
 }
 
 .navigation ul li{
 
 display:inline;
 
 }
 
 .menu{
 
 list-style:none;
 display:inline;
 
 }
 
 .feed_banner{
 
 width:100%;
 height:50px;
 background-color:blue;
 
 }
 
 .content{
 
 width:100%;
 
 
 }
 
 .content_left{
 
 width:500px;
 height:270px;
 background-color:lime;
 float:left;
 
 
 }
 
 .content_right{
 
 width:200px;
 height:270px;
 background-color:orange;
 float:left;
 
 
 }
 
 .footer{
 
 width:100%;
 height:70px;
 background-color:red;
 
 }
 </style>
 
 </head>
 
 
 <body>
 
 <div class="container">
 
  <div class="header">
 
 
 
 
  </div>
 
  <div class="navigation">
 
   <ul> 
   <li><a href="loginreg/login.aspx">Play the Game</a></li> 
   <li><a href="howtoplay.aspx">How To Play</a></li> 
   <li><a href="prizes.aspx">Prizes</a></li> 
   <li><a href="faq.aspx">FAQ</a></li> 
   <li><a href="http://www.google.com" target="_blank">Google</a></li> 
   <li><a href="termsconditions.aspx">T &amp; C</a></li> 
   <li><a href="privacy.aspx">Privacy</a></li> 
   <li><a href="contactus.aspx">Contact Us</a></li> 
   </ul> 
 
 
  </div>
 
  <div class="feed_banner"></div>
 
  <div class="content">
 
   <div class="content_left">
 
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget nulla sit amet quam auctor
   consectetuer. Duis at sem. Etiam cursus semper augue. Aenean est nulla, egestas id, semper a,
   auctor dictum, metus. Pellentesque risus mi, eleifend sit amet, iaculis id, auctor vel, arcu. 
   Integer commodo lacus. Phasellus eget velit in massa pulvinar dapibus. Etiam quis nisl nec pede
   placerat blandit. Fusce ante dolor, hendrerit ut, lacinia quis, ultricies nec, est. Maecenas mattis,
   metus non malesuada pharetra, sapien sem rutrum elit, ut sollicitudin enim ipsum ut risus. 
   Vivamus mi elit, blandit vel, sollicitudin sed, pharetra et, leo. Donec sed dui eget odio tempor
   feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas malesuada ligula eu 
   lacus. Suspendisse scelerisque urna eu urna. Etiam mattis dignissim tellus. Maecenas diam metus, 
   lacinia tincidunt, auctor eu, consequat nec, dolor. Donec mollis dignissim metus. 
 
   </div>
 
   <div class="content_right">
 
 
   </div>
 
  </div>
 
  <div class="footer">
 
  Proprietary Copyright Information etc.
 
  </div>
 
 </div>
 
 </body>
 
 </html>
 [/code]

Regards

Carl

@CentauriMay 05.2008 — #The concept of "footer always at bottom of screen unless pushed down by content" revolves around it being [B]after[/B] the main site wrapper which is set to 100% min-height (which would normally ensure that it is below the screen bottom) and a negative margin pulls it back into view. In the case above, there is a form surrounding everything, and I have no idea why - there are no form elements so the form should be deleted. Also, what the heck is [COLOR="Blue"]runat="server"[/COLOR]? - doesn't look like valid xhtml to me.

@drhowarddrfineMay 05.2008 — #'runat' is asp stuff. Should not be there after being served by server.

@WebJoelMay 05.2008 — #Weird... I did not see wht you posted (images). Just the 'correct' one, for both browsers...

Maybe my local stylesheet is correction for your page(??). Either way, not getting the same visual cues, I wouldl be unable to fix.

@ScriptageMay 05.2008 — #Oops, didn't see that part in the post. Just copied the code and rectified some rendering issues for IE6. Can't believe I missed the entire point of the post :rolleyes:

@agonzalesJul 18.2008 — #I have the same problem with Firefox.

It depends on tag <form> in your page. For example, if you use such a page, it will work fine in Firefox:

<html>

<head>

<style type="text/css">

html, body, #wrapper {

height:100%;

margin: 0;

padding: 0;

border: none;

text-align: center;

}

#wrapper {

margin: 0 auto;

text-align: left;

vertical-align: middle;

width: 400px;

}

</head>

<body>

<table id="wrapper">

<tr>

<td>This is centered</td>

</tr>

</table>

</body>

but if there will be tag <form>, even with <form style="height:100%">,

which we all need for ASPX, like this:

<body>

[B][COLOR="Red"]<form id="f1" action="default.aspx">[/COLOR][/B]

<table id="wrapper">

<tr>

<td>This is centered</td>

</tr>

</table>

[B][COLOR="Red"]</form>[/COLOR][/B]

</body>

all the layout will crash in Firefox (not in IE).

So, I don't know, how to solve this problem.....

Also in #CSS _↴

IE7 problem with drop downs Beginner Links with CSS

Success!

Help @RabBell spread the word by sharing this article on Twitter...

Tweet This

Firefox 100% height problems

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Firefox 100% height problems

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴