...

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



robak
08-09-2005, 01:59 PM
Hi,

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!

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

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

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

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

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

rmedek
08-09-2005, 09:26 PM
#content:after{
content:".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

robak
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,
rbk.

SpirtOfGrandeur
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%;
}

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

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

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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum