SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Odd gap above footer

    Site: http://nupper.heliohost.org/version3

    I implemented Paul's sticky footer technique and it was displaying properly once I had the framework set up.

    I have a rough draft ready for the client, but when I tested it on other browsers/platforms I noticed a gap showing up above the footer.

    It displays perfectly on FF (both iMac and PC) and IE8, but all other browsers on either platforms displays this gap (Chrome, Safari, Opera).

    I know I could tweak margins to close the gap, but given the irregular displays I'd appreciate it if someone could shed some light on what I'm overlooking.

    Thanks

  2. #2
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bah, found the problem.

    Thanks to anyone that took the time and attempted to filter through the code

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    What was it?! It might be handy to know what the problem was for future reference. I did look at your code, but couldn't spot the problem.

  4. #4
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I initially added height:100% to the #container div (the equivalent of #outer in Paul's guide) and while it did seem to fix it at first, I noticed it collapsing very strangely when re-sizing the view port so I nixed that band-aid.

    I had a child #entry div that I gave some side and bottom margins in order to move the text away from the edge of the main #container div. This was pushing the #footer div away from the bottom of the #container and giving me that gap.

    I simply used padding instead of margins to get the same effect.

    All I can say is: thank gawd for Firebug!

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I was working on it too and I concluded that the p-tags in #content needed to be un-collapsed.
    You can do that with a border on #content or by using the overflow property.

    I added the #content selector

    Code:
    #content {
        width:100%;/*IE6 haslayout if needed*/
        overflow:hidden;/*establish margin clearance (un-collapse)*/
    }
    #entry {
        line-height:30px;
        text-align:justify;
    }

  6. #6
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ray - done and appreciated

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beebs93 View Post
    I had a child #entry div that I gave some side and bottom margins in order to move the text away from the edge of the main #container div. This was pushing the #footer div away from the bottom of the #container and giving me that gap.

    I simply used padding instead of margins to get the same effect.
    Yes there are times when padding can be used to simulate margins but it is good to have a thorough
    understanding of collapsing margins. That way you will be able to use them in your favor.

    Say for example your <p> tags had a BG color/img and you wanted the space between them. That is when padding would not work and you would need to use margins.

    The overflow:hidden on the #content div is establishing clearance for the child (the p-tags) margins.

    Thanks, Ray - done and appreciated
    Glad you got it sorted out

  8. #8
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, good read. Now I have more reasons to stay up late to study

  9. #9
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't want to start another thread, so here goes:

    After talking with the client, one of the changes we though of was placing pictures throughout the content and having different pictures for each page.

    I've drawn a rough layout how I think it will be played out:


    As per my current version, this next one will be utilize the sticky footer technique, be fixed width (~900px) and have a faded graphic for the background of the #entry div.

    My question: Assuming I want the 3 photos to be placed so they overlap the border of #entry div AND I would like the text to wrap round it what would be the most efficient way to achieve this?

    My guesses:
    • Float the three images as children of the parent #entry div then use absolute positioning to place them where I want.
    • Make a background image for #entry div with the three images already attached then make fixed width divs to simulate wrapping around the background-embedded photos

      Ugh, my brain hurts just imagining the potential problems with cross-browser compatibility.

      Thanks for any hints
    Attached Images Attached Images

  10. #10
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, after going nuts worrying about finding a difficult solution I just took a breather and did it the simple way with placing <img>s and using float+non-collapsible margins.

    Silly I didn't think of that first.

    Thanks for forcing me to figure it out myself.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beebs93 View Post
    Well, after going nuts worrying about finding a difficult solution I just took a breather and did it the simple way with placing <img>s and using float+non-collapsible margins.

    Thanks for forcing me to figure it out myself.
    Glad you got it sorted out on your own.

    Just curious though, are you saying that you floated the images and then shifted them into place with negative margins?
    That's how I would have done it.

    You can't use overflow:hidden on the #entry div for float containment though, it would clip the images.
    It would need the clearfix method there for float containment.

  12. #12
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Just curious though, are you saying that you floated the images and then shifted them into place with negative margins?
    That's how I would have done it.
    Yeah, that's what I figured was the easiest solution. I've had to redesign another draft after the client changed their mind: http://nupper.heliohost.org/version4/who_we_are.php. I'll add photos to the other pages once they send them.


    Quote Originally Posted by Rayzur View Post
    You can't use overflow:hidden on the #entry div for float containment though, it would clip the images.
    It would need the clearfix method there for float containment.
    The #entry div doesn't currently have overflow:hidden so no problem with clipping. I'll have to read up on clearfix as I haven't had to use it yet.

    Cheers

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The #entry div doesn't currently have overflow:hidden so no problem with clipping. I'll have to read up on clearfix as I haven't had to use it yet.
    I spoke too soon, it looks like the text will hold the #entry div open so there is not really a float containment problem there. You should be just fine without any clearfix code here.

    I was playing around with your sample image and came up with this.

    http://www.css-lab.com/test/stickfoot-test.html

    IE6/7 have trouble with that last floated image though due to their broken float model.

  14. #14
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, awesome. Nice work

    Quote Originally Posted by Rayzur View Post
    IE6/7 have trouble with that last floated image though due to their broken float model.
    Do you mean how the last floated image is pushed down below the bottom blue paragraph (and not on top with wrapped text as your model)?


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
  •