Results 1 to 3 of 3

Thread: Margin for footer being applied at top of page!?

  1. #1
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Margin for footer being applied at top of page!?

    Hi all, long time reader, first time poster...

    I am working on this site: http://beta.neovoca.com/Home.aspx

    The original css layout is based on the 960 layout system, but I am having a problem getting space between my main block block of content and the footer.

    Take a look at #footerBG - It has a margin-top of 100px - Which it is honouring as you would expect - but it is also allocating this space at the very top of the page too (You can see this by flicking this class on and off in Firebug).

    I'm pretty sure I am making some silly mistake, but I just can't work it out.

    Interestingly placing a <br clear="all" /> between the #content div and the #footerBG div does fix the problem - But adding a clearing div doesn't work.

    Finally this problem only shows for me in FF3 - IE7 shows the page as I would like it to appear.

    Any thoughts?

    Thanks

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    It is a little bit strange and i couldn't explain what is happening. What seems to fix the issue is to take away the margin-top:100px, like this
    Code:
    #footerBG {
    	background:#0b1f36;
    	margin: 0 0 75px 0;
    }
    and the somewhere add this
    Code:
    #content{
    	padding-bottom:100px
    }
    Just a suggestion and I can't be sure if it works, but you can try it.
    Last edited by azoomer; 07-03-2010 at 04:26 PM. Reason: typo

  3. The Following User Says Thank You to azoomer For This Useful Post:

    mjb2000 (07-05-2010)

  4. #3
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks azoomer - I have made the change as you suggested and it is working.

    I also tried
    Code:
    #content {
    margin-bottom: 100px
    }
    But this also had the same problem as before???

Bookmarks

Posting Permissions

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