This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > October 2005 > height=100% is not working for Mozilla browser





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author height=100% is not working for Mozilla browser
Raghavendra

2005-10-18, 6:29 pm

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

Beauregard T. Shagnasty

2005-10-18, 6:29 pm

Raghavendra wrote:

> 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
Steve Pugh

2005-10-18, 6:29 pm

Raghavendra wrote:
> <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?

> 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?

> 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.

> 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.

> 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

Benjamin Niemann

2005-10-18, 6:29 pm

Raghavendra wrote:

> 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.

> 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...ive/2005/08/29/>

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


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews