20 replies [Last post]
Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

So I looked in the How To forum and read the thread entitled footers. "Wonderful," I thought, "I can take out my lame hack for content-height control and footer placement." I followed the link to the Man in Blue page and thought I'd give that a try (http://www.themaninblue.com/experiment/footerStickAlt/).

Well, it kind of went wonky. So I started from scratch and found my problem, I think. The relevant CSS is this:

html { height: 100%; }

body
{
	background-image: url(images/BG1.jpg);
	background-color: #FFFFFF;
	padding: 0;
	margin: 0;
	height: 100%;
}

#nonFooter
{
	position: relative;
	min-height: 100%;
}

* html #nonFooter { height: 100%; }

#footer
{
	position: relative;
	height: 35px;
	margin: -55px auto 0 auto;
	padding: 10px 0;
	width: 722px;
	background-color: #A3571B;
}

#header { clear: both; }

#pic
{
	margin: 0 auto;
	color: #A3571B;
	font-family: impact;
	font-style: italic;
	width: 722px;
	height: 250px;
	padding: 0;
	background: transparent url(images/Title.jpg) no-repeat;
}

#foot-note
{
	text-align: center;
	background-color: #D3874B;
	padding: 5px 0;
	margin: 0 10%;
}

p
{
	font: 11pt arial;
	padding: 0 15px;
	color: #000000;
	text-align: justify;
	line-height: 130%;
	margin: 0;
}

.fine-print
{
	text-align: center;
	font: 7pt arial;
	padding: 0;
	color: #000000;
}

The HTML is thus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Footer Test</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>

<body>

<div id="nonFooter">

<div id="header">
<div id="pic">
</div> <!-- #pic -->
</div> <!-- #header -->

</div> <!-- #nonFooter -->

<div id="footer">
<div id="foot-note">
<p class="fine-print">Blah blah blah.</p>
</div> <!-- #foot-note -->
</div> <!-- #footer -->

</body>

</html>

Sorry if there's a bit much code. I thought I'd err on the side of too much information, rather than too little. And I tried to clean it up, but I'm sure there are still redundant margin settings to zero and things like that. I also know my font stuff needs redoing. Please forgive.

Now, normally there would be words inside the "pic" div, and, well, content to speak of, and actual text in the footer, etc. Here's my delima:

I want that title picture to be away from the edge just a smidge. However, when I go change the margin on the "pic" div to "10px auto", it pushes the footer down a bunch, even though I have no content at all.

This is similar behavior to a bug in Opera mentioned in the discussion following the example, but putting a border doesn't seem to've pleased Mozilla any better. The odd thing is, the examples of this implemented by others seem to work (e.g. http://www.1cog.com/public/footer.html).

I'm pretty new to this whole CSS thing, so maybe I'm missing something or maybe this is a bug everyone (but me) knows about and knows the work-around for, but--I can't seem to tackle it, or find reference to it. Help?

->Day<-

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footers 2: Son of Footer

try putting

html {margin: 0; padding: 0}

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

I thought I'd said that, but I guess it got lost in my various edits. :oops:

Anyway, setting no margin on the <html> tags doesn't change anything. It's all about margin for elements within the #nonFooter div.

->Day<-

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

Maybe is this in the wrong forum? Should I have put it in the Layouts forum or something? I'm not really sure how I can be more explicit... I suppose I could upload and link it, but I'm loath to do that unless someone thinks it will really help much.

->Day<-

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Footers 2: Son of Footer

What if you add padding to either #header or #pic? Without providing a link to the page, I'm not sure I can help you much more.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Footers 2: Son of Footer

Padding the div would be my suggestion.

Day from a point of view of people reading the sub-forums they all get read, by everyone.

A link is asked for in the forum guidelines as it is often the easiest and fastest way to check things.

It's clear your lacking an understanding somewhere on how properties behave which would be easier to check with a link.

It may be a collapsing margin but if you put a margin on something you should expect an adjacent element to be pushed away.

Link us up.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

Heh. Alrighty, then. Here's a link:

http://texassportsweekly.com/rebuild.html

And the CSS:

http://texassportsweekly.com/rebuild.css

I left some stuff in the CSS that's unused, but I intend to use it later. It shouldn't be hurting anything, I think you'll agree. If you go up a directory in that URL you'll see what I'm trying to rebuild, more or less. The problems with that page are the reason I'm doing the rebuild.

->Day<-

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Footers 2: Son of Footer

I'm not sure what the problem is: changing the margin on #pic moves your whole layout (as it's the first thing in your layout), not just the footer.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

The intent is to force the footer to be at the bottom, no matter what's in the nonFooter bit. That's why the the <html>, <body> and nonFooter <div> are all set to be 100% min-height. Then the footer <div> is put below the nonFooter <div> and given a negative margin to show up.

Eventually, I'll put bottom padding on the nonFooter <div> so that the footer doesn't cover up any content, but that's kind of step two.

So... Setting a margin on something inside nonFooter shouldn't really mess with things outside nonFooter, should it?

->Day<-

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

Oh. Also, as for padding... That's fine for this instance, but eventually I'll want to have p elements in there with margins to keep their distance from each other. I don't think I could manage to do this layout entirely without vertical margins.

->Day<-

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Footers 2: Son of Footer

In your 1st post, you identified your problem as being that when you added a margin to #pic that it pushed the footer down. I'm saying that I've had a look at your layout and that's not happening for me: the footer stays at the bottom of the window regardless of what top margin you put on #pic. So going on that, I don't know what the problem is. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

Well. That's no good. I thought it might be my comptuer, so I went on another computer and had the same problem in FF and Netscape. Oddly, IE rendered it the way I intend. This is surely a sign that I'm doing something horribly wrong. Wink

I thought that maybe it had something to do with the router we're both behind so I asked a friend to check it out. He uses FF and reported a single pixel of scroll (as intended). Is there some weird router setting that could make computers in my apartment to render this oddly?

->Day<-

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Footers 2: Son of Footer

You have two problems you want a margin on the #pic to I presume have some space around it and the header. At the moment you have margin 10px top and bottom on #pic as I mentioned briefly earlier this is a collapsing margin problem add padding:1px 0; to the header div and you will see the header close up to the top of the viewport, use a border on the header div to see this effect at work, add and remove the padding, the padding will constrain the #pic margins within #header.

The footer has a similar type problem although this time it's the use of padding that you have on it. This has the effect of increasing the size of the footer and pushing through the bottom of the page giving you a gap between the bottom of the nonfooter div and perceived viewport area this is also why you need a negative margin that is 55px when the actual declared height of your footer is only 35px.

Remove the padding from the footer and be careful with any margins on the footnotes or p nested in this element as you may well get more problems, you may well need to increase the negative margin to compensate for margins or padding if they are used.

lastly the examples of this layout use the id name nonfooter to I suppose make a distinction, but don't actually call it this give it a more usual name such as wrapper or container.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

Okay. I think I'm getting most of that. I've heard of "collapsing margins" before, but I've never had it explained. I'll play with borders and see if I can't figure it out.

Is there a reason to call it something besides nonFooter, or is this a convention thing? Not that I'll keep it just to defy convention if that's it. I'm just asking. I figure "page-wrapper" or something would do alright?

->Day<-

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

I played with it some. Messing with borders didn't help much because adding a border is just the same as adding padding or margin, so it would fix the problem, rather than illustrate it. Hoever, the nifty little Outline drop down in the FF WebDev toolbar was right helpful.

For quick reference: The page and the CSS.

Now, I had to compensate for adding two pixels (total) of vertical padding to the footer, but I only compensated for one of them. I'd like to force the thing to have scroll bars so that I don't get that jump when switching between pages with long and short content, if that makes sense.

Does all that look clean and friendly? The CSS and HTML still both validate. I'm not sure if that's the accepted way to deal with collapsing margins, or not, having not dealt with them before. So, uh, feel free to tell me better. And thanks, so far, for the help.

->Day<-

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

If I may post yet again in my own thread...

I just read about collapsing margins at W3C. Now I get it, kinda. So. Would this be solved by setting something to have an overflow of something other than 'visible'? The reason this came to mind is because of this bullet from the linked page:

Quote:
Vertical margins of elements with 'overflow' other than 'visible' do not collapse with their in-flow children.

Or would I have to go and add whatever overflow rule I came up with to nearly every element in my stylesheet? Anyway, that would seem like a cleaner way of doing things than putting 1px paddings and such all over the place. Or am I on the wrong path now?

->Day<-

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Footers 2: Son of Footer

Not on the wrong path as such, padding and borders will contain margins as will overflow hidden/scroll/auto if you can get away with using overflow then try it ; overflow auto is probably a safe bet but it's a difficult subject and IE throws up massive problems along with HasLayout . You'll need to check carefully cross browser.

As for the name 'nonfooter' it's just dumb don't know why they used it it means nothing, describe your ID: container, wrapper, contents, are all conventional terms there is no rule just common sense and the fact that someone else may read your code and be trying to figure it.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

Huh. The overflow trick works in everything except Opera from what I can tell. Thus I'm going to leave the 1px paddings in, even though I feel like it's less clean.

Oddly, IE wanted overflow: hidden on the footer or else it put a scroll bar on that for the one pixel I had added to the html tags, but oh well.

Now back to adding things into the layout again. Thanks, again, for the help with this stuff. What the heck's the purpose of collapsing margins, anyway? When would you want that functionality?

->Day<-

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Footers 2: Son of Footer

You would want it actually it makes sense when you think about paragraphs and block level elements you wouldn't want them doubling all the margins.

IE is a real nightmare with this matter as it brings it's hasLayout into the equation and sometimes will not collapse margins at all sometimes will and on and on it's one time that you do not really want IE to have widths or heights on elements as it locks the element into un-collapsing margins and other stranger behavior.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 14 years 2 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Footers 2: Son of Footer

Ah. That makes sense, I suppose. But maybe I'm misunderstanding it, then.

Is it that the margin of the child disappears when it touches that of its parent? I was under the impression that the margin of both were added together and then treated as if they belonged to the parent.

And in non-child/parent cases, just replace with bottom/top if you like.

This would end up doubleing margins anyway, but if it were the case that the margins just vanished, then my header picture would have been flush with the top of the window, wouldn't it have been? Maybe I'm over-thinking it.

->Day<-

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Footers 2: Son of Footer

No they don't add together they collapse together and the greater margin wins out generally the inner, giving rise to the parent looking as though it has been forced down due to the child s margin actually pushing through the top of the parent and acting on the element above.


links for further perusal the IE ones amusing if you have a strong stomach.
http://www.complexspiral.com/publications/uncollapsing-margins/

http://www.brunildo.org/test/IEMarginCollapseLayout.html

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me