height=100% is not working for Mozilla browser

#1

Hi All,

Here is my code.
-------------------------------------------
<div style="height:100%">
<BODY>
sample text spanning about 30 lines
</BODY>
</div>
<table><tr><td>footer</td></tr></table>
-------------------------------------------

I am using this code to display the footer always at the end of the
browser window.

In IE the footer is getting displayed properly at the end even when the
text does not span the window height.

But in mozilla the footer is getting overlapped with the body text.

Any help will be appreciated.

Thanks,
Raghavendra.V

#2

Raghavendra wrote:

Quote:

Here is my code.
-------------------------------------------
div style="height:100%"
BODY
sample text spanning about 30 lines
/BODY
/div
table><tr><td>footer</td></tr></table
-------------------------------------------

Your code is invalid and Mozilla is rightly rejecting it. IE, on the
other hand, attempts to guess, and frequently makes misteaks.

Please visit: http://validator.w3.org/

--
-bts
-When motorcycling, never follow a pig truck

#3

Raghavendra wrote:

Quote:

div style="height:100%"
BODY
sample text spanning about 30 lines
/BODY
/div
table><tr><td>footer</td></tr></table

What on earth made you think that you can nest a body element inside a
div element? The above code so bogus that there is no correct way to
display it. Consider yourself lucky that browsers bother to display
anything at all.

And why do you think that your footer is tabular data?

Quote:

I am using this code to display the footer always at the end of the
browser window.

Where users with large windows won't notice it at all?

Quote:

In IE the footer is getting displayed properly at the end even when the
text does not span the window height.

IE does a lot of fixing up of broken code. In this case it just happens
to fix it up in such a way that matches what you want.

Quote:

But in mozilla the footer is getting overlapped with the body text.

Interesting. I guess that you haven't bothered to show us all your
code.

Quote:

Any help will be appreciated.

height: 100%; means 100% of the parent element's height. Your div
doesn't have a parent element, hence the height defaults to be being
the height of the content.

What you want isn't easy across browsers, mainly due to IE's terrible
CSS support but also due to the fact that the layour model in CSS
doesn't really work for this sort of thing (the relationship between
the window and the document has more nuances than most people think at
first).

I have an old example at http://steve.pugh.net/test/test57.html but
it's broken in modern versions of Opera (and possibly other browsers)
so I don't recommend it.

Steve

#4

Raghavendra wrote:

Quote:

Here is my code.
-------------------------------------------
div style="height:100%"
BODY
sample text spanning about 30 lines
/BODY
/div
table><tr><td>footer</td></tr></table
-------------------------------------------

What's that? You cannot have a BODY inside of a DIV, nor a DIV or TABLE
outside of the BODY... Whatever a browser makes of this mess is completely
undetermined.
validator.w3.org is your friend.

Quote:

I am using this code to display the footer always at the end of the
browser window.

In IE the footer is getting displayed properly at the end even when the
text does not span the window height.

But in mozilla the footer is getting overlapped with the body text.

Any help will be appreciated.

Not sure how good this version is, but you might give it a try:
<http://www.themaninblue.com/writing/perspective/2005/08/29/>

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

height=100% is not working for Mozilla browser

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

height=100% is not working for Mozilla browser - 10-18-2005 , 11:32 AM

Re: height=100% is not working for Mozilla browser - 10-18-2005 , 11:37 AM

Re: height=100% is not working for Mozilla browser - 10-18-2005 , 11:44 AM

Re: height=100% is not working for Mozilla browser - 10-18-2005 , 11:48 AM