Odd gap above footer

HTML & CSS
1

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 :smiley:

2

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

3

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.

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 :smiley:

4

Glad you got it sorted out on your own. :slight_smile:

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.

5

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

6

Wow, awesome. Nice work :smiley:

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

7

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.

8

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

[B]#content[/B] {
    width:100&#37;;/*IE6 haslayout if needed*/
    [COLOR=Blue]overflow:hidden;[/COLOR]/*establish margin clearance (un-collapse)*/
}
#entry {
    line-height:30px;
    text-align:justify;
}
9

Thanks, Ray - done and appreciated :smiley:

10

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

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

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

11

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 :smiley:
12

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! :smiley:

13

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.

14

Bah, found the problem.

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