2 replies [Last post]
mosteo
Offline
newbie
Last seen: 16 years 36 weeks ago
Timezone: GMT+1
Joined: 2004-02-11
Posts: 3
Points: 0

Please visit this test link I've set up:

http://hyperion.homeip.net/test.html

and look for the right footer in the bottom.

I'm trying to get a footer at the bottom even if the contents are not long enough. I've rolled out that solution, using this scheme:

<div id="contents">
<div id="main"></div>
<div id="footer"></div>
</div>

It works ok in Opera and Explorer, but in Firefox "contents" remain shorter than "main" so it fails an places miserably the footer in the middle of the text. I've observed too that if I specify a narrow height for a div, it is painted with that size even if the font size is larger (i.e. the bounds are not expanded to contain the text -- see the footer).

Is something wrong in my stylesheet? Should boxes expand to contain the text? Both Opera and Explorer do that.

Thanks in advance for any clues.
[/url]

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 49 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Problem with footer - Firefox specific

This one works in IE and MOZ but not Opera -
http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

Maybe you can combine them. Please come back and show us if successful.

Regards
Day

The only way to learn is to do it yourself

mosteo
Offline
newbie
Last seen: 16 years 36 weeks ago
Timezone: GMT+1
Joined: 2004-02-11
Posts: 3
Points: 0

I got it :)

I found something almost identical in the web, though I don't remember where... anyway, that's the version I'm using now and which works with IE, Firefox and Opera:

HTML, BODY {
font-family : verdana, arial;
font-size : x-small;
color : black;
min-height : 100%;
height : 100%;
margin : 0px;
padding : 0px;
}
html>body, html>body #contents {
height: auto;
}
#contents {
position : absolute;
top : 0;
left : 0;
height : 99%;
min-height : 99%;
width : 100%;
}
#main {
padding-left : 4px;
padding-top : 4px;
padding-bottom : 60px;
height : auto;
width : 99%;
}
#footer {
width : 100%;
position : absolute;
bottom : 0;
text-align : center;
vertical-align : bottom;
padding-bottom : 20px;
}