View Full Version : CSS positioned footer works in IE but fails in FF

08-09-2005, 01:59 PM

I have to managed site looking like this http://www.kuczyn.com/ using css. Now, I have only one problem left that I cant fix by myself - the ^&%$# footer positioning. It seems to work ok in IE (staying always at the bottom of the page, and if the content is stretching the page, then staying at the bottom of it) but it fails to work in Firefox win 1.06 and Opera win 8.

Please, help me if you can, because Im going to crash my head on the wall with this bug ;)

Thanks for any advice!

08-09-2005, 02:06 PM
My guess without looking at the code is that you need to clear a float.

Try adding clear:both; to the footer div.

08-09-2005, 02:11 PM
Then look at the code first.. This is not clearing floats problem, Iv tried to do so..

08-09-2005, 02:29 PM
Only trying to help mate :rolleyes: , when I tried to save your website to change/view offline I had an error when trying to open the CSS files, hence, I couldn't change the code offline.

08-09-2005, 02:32 PM
Yeah using absolute positioning. This should work, but I think wrapper isn't long enough, There's floated div in t right? the right area I mean. Clear it.

08-09-2005, 02:57 PM
Clear what? Clearing footer didnt helped, Iv tried. Clearing sidebar would destroy my layout and wont help position the footer in right way (I`v tried also). Still no solution for this...

Pepe, the bull
08-09-2005, 08:49 PM
From what I can see the footer is at the bottom of the wrapper div. The problem is that the sidebar is not pushing the bottom of the wrapper div down (possibly because it is floated). I also could not clear the footer because of the absolute positioning. Try adding a clearing div after the footer (like the one below) or change the positioning of the footer to relative.

<div style="clear:right; line-height:0;">&nbsp;</div>

08-09-2005, 09:26 PM
display: block;
clear: both;
height: 0;
visibility: hidden;

08-10-2005, 01:13 PM
Pepe: I didnt helped, any of this two solutions wasnt working (really, try to watch the site in 1280x1024 or even 1600x1200).. :(

medek: your code didnt help either. Dont know what is going on here, but it seems to be impossible thing to achieve.. :(

So, anybody have some idea how to fix this %^#%$! footer to work corretcly? I am getting depressed because of that :( Please, help if you can..

Best regards,

08-10-2005, 01:39 PM
If it works in IE and does not work in FF or O then It is usualy a coding problem. That being said there is no reason why we could not fix it. Let me know if the two items in red fix it.

#footer {
position: absolute;
top: 100%;
margin-top: -27px;
min-height: 26px;
width: 415px;
padding: 15px 20px 15px 25px;
background-color: #F2F2D1;
font: 10px Verdana, Helvetica, Arial, sans-serif;
color: #CECE96;
border-top: 1px solid;
line-height: 170%;

08-10-2005, 01:45 PM
SpirtOfGrandeur: Well, those two didnt helped - now footer is not working in IE, FF and O. What to do, what to do... :<

08-10-2005, 02:16 PM
It worked!

Solution that can be found here http://solardreamstudios.com/learn/css/footerstick/ works like a charm! Use it, it is really working:))

Thanks everybody for their support!

Tristan Gray
08-10-2005, 02:40 PM
Interesting, I have redesigned several sites due to footer problems now. Perhaps the next will not require it.

08-10-2005, 02:49 PM
Well, I was too enthusiastic about that: it again works uner IE but dont works under FF and O. Can ANYBODY help? (now, it looks like http://tempestnet.pl/~r/pub/szot.jpg )... :(

Tristan Gray
08-10-2005, 02:58 PM
Odd that it appears that the gap is exactly the correct height of the footer itself.

08-10-2005, 03:12 PM
And this gap exist only when there is scrollbar - when I put FF in fullscreen mode, then wverything is all right...

Some ideas for fixing?