Mon, 2004-02-16 20:55
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]
Fri, 2004-02-27 13:20
#1
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
Fri, 2004-02-27 17:55
#2
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;
}