Odd gap above footer

[beebs93]

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

[beebs93]

Bah, found the problem.

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

[ralph.m]

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.

[beebs93]

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!

[Rayzur]

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

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

[beebs93]

Thanks, Ray - done and appreciated

[Rayzur]

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

[beebs93]

Wow, good read. Now I have more reasons to stay up late to study

[beebs93]

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

[beebs93]

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.

[Rayzur]

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.

[beebs93]

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.

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

[Rayzur]

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.

[beebs93]

Wow, awesome. Nice work

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