Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS positioned footer works in IE but fails in FF

    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!

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My guess without looking at the code is that you need to clear a float.

    Try adding clear:both; to the footer div.

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Then look at the code first.. This is not clearing floats problem, Iv tried to do so..

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Only trying to help mate , 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.

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    CATdude about IE6: "All your box-model are belong to us"

  • #6
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

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

  • #7
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    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.
    Code:
    <div style="clear:right; line-height:0;">&nbsp;</div>
    Pepe, the bull

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Code:
    #content:after{
    content:".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    }

  • #9
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    #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%;
    }
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #11
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    SpirtOfGrandeur: Well, those two didnt helped - now footer is not working in IE, FF and O. What to do, what to do... :<

  • #12
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #13
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Interesting, I have redesigned several sites due to footer problems now. Perhaps the next will not require it.
    Once I thought I was wrong but I was mistaken.

  • #14
    New Coder
    Join Date
    Aug 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 )...

  • #15
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Odd that it appears that the gap is exactly the correct height of the footer itself.
    Once I thought I was wrong but I was mistaken.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •