Footer problems...content overlaying

My designs almost always call for sticky footers, and I always seem to run into problems doing them.

I’m working on my freelance site.

I give my wrapper a min-height:100% and a neg top margin equal to my footer, then reclaim that space by giving my header a border-top equal to the height of my footer, as well.

Web Development | Bades Design

That page and the design page has the same problem.

Sticky Footers:injured:

I’m pretty sure Paul is the one who originally helped me out when I first got into Stick footers.

I have my sticky footers setup correctly (I believe), I’m just not sure if other things on my page are obstructing it from working properly.

You must be talking about the <div id=“top_bkg”>…this was a special case.

Explained from my css sheet:

#wrapper{
	width: 1100px;
	margin: 0 auto;
	min-height: 100%;
	margin-top: -242px;
	
	/*negative margin explanation: [B]In order to set the header background image (head_bkg2.jpg) to repeat with a fixed width wrapper, I had to place the image in a separate div outside of the wrapper.[/B] Since the image had a height of 128px it pushed the entire wrapper down by 128px. Therefore I had to set a negative top margin of 128px to the wrapper to get it to sit 'ontop' of the image. I also added a sticky footer. The footer height is 114px, therefore giving the wrapper a height of 100% of the page plus 114px. In order to get rid of the 114px excess, I had to give the header a top-border of 114px, and then suck up the wrapper again with another negative top-margin, this time adding -114 to the -128 giving us a total of -242px*/
	
}

Have you read Paul’s sticky post on sticky footers?

It explains everything you need to know. :slight_smile:

You only have to read a few paragraphs of Paul’s post to see that you are breaking the rules.

The next important step is to create a whole page wrapper that will hold everything else on the page except for the footer.

I think I was okay in having that extra div outside of the wrapper, I made up for it by adding on more to the negative margin of the wrapper…

The sticky footer was working when I had no content on the page.

Fair enough. My point was really that your code is not the same as Paul’s. If you read further, you see he has clear: both on the footer, which seems to be what you are lacking here.

#footer {
  background-image: url("images/footer_bkg.jpg");
  background-repeat: repeat-x;
  [COLOR="Red"]clear: both;[/COLOR]
  height: 114px;
}

Ralph, you did it.

It was the clear:both

Funny, I’ve used that same sticky footer code on a few other sites and never included the clear (must have overlooked it), and without problems.

Thanks!

Great! Glad to be able to help. I’ve never done a sticky footer, as I’m not a fan of them, but I’ve been meaning to look at it a bit more closely. Funnily enough, I’ve been asked to do one today. (Still grumbling, though.)

Well done for making the extra bit at the top work. It certainly is logical assumption that the extra neg margin should work. Shows that there is some flexibility in this method.

I’ve never liked nor had decent results with the negative top approach – it’s ALWAYS broken and is probably part of why I’m still getting scrollbars on it here. (as I do with every site that uses that method). I much more prefer the negative margin on the FOOTER itself instead of the wrapper… with position:relative to handle the depth sorting. It just seems to work better.

that said your HTML is full of issues and problems that could be causing all sorts of layout issues cross browser; likely contributors to why I’m seeing four different appearances in four different layouts. I started to cover that in your post about the use of heading tags (which are all wrong and a hefty part of any problems).

I mean this is another example of jquery doing CSS’ job or for some annoying animation (that’s so slow I didn’t think you HAD hover effects at first), incomplete headers, no media attributes on your CSS link tags, whole slew of pointless wrappers for christmas only knows what reason, wasteful comment placements (closing a tag is the end of a section? REALLY?) That could be tripping rendering bugs you’re hacking around for IE and some versions of FF, nonsensical heading orders, (though nowhere NEAR as bad as your home page), etc, etc…

I suppose the first order of business would be to clean up your HTML. CSS is only as good as the HTML it’s applied to, and your HTML is, well… it’s not as bad as some I’ve seen, but it’s pretty bad… the CSS too since you have NO images off graceful degradation.


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

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Web Development - Bades Design
</title>

</head><body>

<div id="heightWrapper">

	<h1>
		<a href="/">
			Bades <span>design</span><br />
			<small>Good Design. Practical Development. Smart Marketing.</small>
			<b><!-- image replacement --></b>
		</a>
	</h1>

	<ul id="topMenu">
		<li><a href="about.html">About</a></li>
		<li class="last"><a href="contact.php">Contact</a></li>
	</ul>

	<ul id="mainMenu">
		<li class="home>
			<a href="\\">Home<span></span></a>
		</li>
		<li class="design">
			<a href="design.html">Design<span></span></a>
		</li>
		<li class="development current">
			<a href="development.html">Development<span></span></a>
		</li>
		<li class="webmarketing">
			<a href="webmarketing.html">Web Marketing<span></span></a>
		</li>
	</ul>

	<hr />

	<h2>Web Business Applications &amp; Development</h2>

	<hr />

	<div class="contentBox">

		<div class="subSection">

			<h3>What are they?</h3>
			<p>
				Today's web is more than the delivery of static content. What separates the organizations that maintain a web presence from the organizations that <b>harness the web's full potential</b> is the ability to build functional applications to meet the needs of both their customers and management. Whether it's a tool to help golfers reserve their tee times at their favorite course, or a means for an HVAC company to maintain relationships with its clients and to follow up after performing work, web applications provide a standard platform that both internal and external users are already familiar with; their web browser.
			</p>
			<img
				src="images/practical_mirror.png"
				alt="pratical applications to better serve customers"
				class="plate"
			/>

			<hr />

			<h3>Benefits of Web Applications</h3>
			<p>
				Business Applications add another platform for customers to reach out and interact with your business over the internet. For example: allowing orders or reservations to be made during non-business hours at your customers' convience. Web applications will help you create new avenues for communication, business to consumer (and B2B) selling, and much more allowing your business to grow and take the edge over your competitors. <br/><br/>					Firms that capitalize on the power of web applications can serve their customers' needs in a more timely and effective manner, and gain access to valuable data concerning the habits and patterns of those customers. This push for strong user interaction has been labeled Web 2.0
			</p>

		<!-- .subSection --></div>

		<div class="subSection">

			<p id="benefit">
				Don't know if your business could benefit from web applications?
				<a href="contact.php">Contact Us!</a>
			</p>

			<hr />

			<blockquote>
				<p>
					"...capitalize on the power of web applications to serve customers' needs in a more timely and effective manner, and gain access to valuable data concerning the habits and patterns of those customers."
				</p>
			</blockquote>

			<hr />

			<h2 id="conceptHeader">
				Bring a Concept to Reality<br />
				<small>You imagine it, We build it.</small>
				<span><!-- image replacement --></span>
			</h2>
			<p>
				The skilled professionals at Bades Design offer both the technical capacity in today's modern web development platforms and the business process modeling skills necessary to bring a concept to reality. If it can be imagined, it can be built.
			</p>

		<!-- .subSection --></div>

	<!-- .contentBox --></div>

	<div class="heavyContentBox">
		<h3>Our Development Philosohpy</h3>
		<p>
			Bades Design offers the ability to tailor an application to the specific business needs and processing requirements of your organization. Delivering value means applying technical skill and knowledge to an area of inefficiency.
		</p>
	<!-- .heavyContentBox --></div>

<!-- #heightWrapper --></div>

<div id="footerWrapper"><div id="footer">
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="design.html">Design</a></li>
		<li><a href="development.html">Development</a></li>
		<li><a href="webmarketing.html">Web Marketing</a></li>
	</ul>
<!-- #footer, #footerWrapper --></div></div>

</body></html>

Is a good start in terms of cleaning up those issues I mentioned above. If I have time I’ll belt out the CSS I’d be using with that.

I’ll have to take a look at this tomorrow, thanks for the replies.

If you know of good resources where I can learn more about correct HTML semantics send them my why.

I learned how to make websites by myself and with some help from these forums, I haven’t been doing it for that long (a little under a year).

Not sure why you are putting all my header info into a h1?

I was under the impression that h1 should describe what each page is…i.e. design.html = <h1> Website Design</h1> etc.

The way you have it h1 will be the same on every page?

I’m a little confused.

There are two schools of thought on H1… and it’s a pretty old argument/dead horse flogged beyond recognition at this point.

The first involves putting the “what the page is” into it, which doesn’t make a lot of sense from a structural standpoint and seems to have originated with the SEO folks.

The second, which I do, uses it as a structural element saying “all other headings on this page are subsections of this”. Usually I have several sections on pages with headings that are NOT subsections of what the “h1 for the topic” folks would put it on. (what I have a h2 for). It’s also why I like the H1 to be my first content element on the page, since it says “everything is a subsection of THIS”. (since the title attribute in HEAD does NOT mean that, and exists for the UA to style the window or tab, NOT to convey ANY content)

It’s kind-of the point of the tag – but most people can’t seem to understand how to nest heading tags anyways; skipping over heading levels, putting them in orders that make no sense, not using them as the start of subsections and just slapping them around everything any-old-way… You see it time and time again.

But given most people chose tags for what they look like by default and not what they mean, what can you expect?

I’m starting in on the CSS and remastering the images for that now that I’ve got some food in my belly.

… and here’s what I came up with:

Web Development - Bades Design

As with all my examples the directory:

Index of /for_others/bades

Is unlocked for easy access to it’s bits and pieces. It did gain back an extra DIV, but that so the layout wasn’t busted IE7- and to make applying CSS3 drop-shadows less of a hassle.

Took a few stylistic liberties – mostly to try and take the dissimilar color areas and effects and make them a bit more… practical. Axing the javascript for standard sprites on the menu has the added bonus of ACTUAL images off graceful degradation – one of the entire reasons to do image replacement in the first place – the H1 getting a similar treatment.

Layout works all the way back to IE 5.5, naturally IE8- don’t get all the CSS3 goodies. Decent Images off graceful degradation (the h2 is invisible – that’s the background gradient which I’d not fade to so bright a color – limits the options.

Also notice I made the entire header gradient and tiled backgrounds a single image, and pre-composited all the images saving them as 8 bit .png with no alpha… so you don’t need to worry about legacy browsers and it shaves a wee bit off the filesizes. (part of what I mean when I say "alpha transparency on images is rarely necessary and mostly bloat!)

The re-adjustment of all the paddings was to help with legibility too – yer content was a wee bit close to the walls for comfort.

I’m sure you’ll have lots of questions, so go over it and I’ll answer what I can.

Okay here is what I have so far.

Images:
There are times you use <img> tags and other times you do not. Why is this? The time you use CSS I have seen you use <b> and <span> to place images. Isn’t <b> to bold things?

It seems you like to underlay CSS images with text that resembles them. I’m assuming you do this because when you use CSS for images there is no alt=“” attribute to fill in?

hr:
it seems you use these to separate things out, yet you display them as none.

<p id=“benefit”>
This was interesting to me, I would’ve not thought to give a <p> a bkg. I obviously used a div and gave it a bkg and then put the <p>'s in it. I don’t think the way I did was wrong, you just used slightly less mark up.

Navigation Menu
This might take a whole other topic to discuss. As the designer of the page I liked having the jquery hover, not sure why you didn’t keep my orignal sprite either?

I see you combined all my bkg images into one big one, that’s cool, probably should’ve done that in the first place. So why with the main navigation do you recall the bkg image?

Sticky Footer
So the pagewrapper has a minheight 100%, all you did to get the footer to stick was give it a negative top margin? I know Paul suggests giving the header a topborder equal to the footer then move the whole page up with a neg-margin on the wrapper. Still a bit confused , if you gave the footer a neg margin to bring it back up, wouldn’t that overlay any content that was at the bottom of the page wrapper?

That’s it for now, thanks for all the help so far.

Ask yourself, is the image content, or is it presentation. A logo to me is a presentational affectation of content, so I use a image replacement technique to place an image over actual content – the text the image represents. This gives a much better appearance when images are turned off, but CSS remains on… and yes, people DO browse that way – people in places like Canada where they have bandwidth caps, people on mobile connections where you pay by the gig or even the meg – people like 100 miles north of me in Coos county New Hampshire where 33.6 dialup is a GOOD DAY.

Besides, did you see what your alpha .png did when CSS was disabled/unavailable?

IMHO (and most of your semantic coders agree with this) the image tag should be reserved for when the image is actually content. As “accessible” as alt text is, it’s not AS accessible as actual plaintext – especially if that element is a heading.

If the image represents text and is not a “content image”, that’s where image replacement techniques come in. If the image is something like a border, or background – it has NO BUSINESS in the HTML in the first place.

Using B is kind-of tag abuse, but when the tag has no actual content, there’s no harm no foul. The more “correct” element would be an empty span, but since I already used a span I’d have to put classes on each of them. Using tags that are presentational only and apply no change in meaning to their content like B or I is a “no harm, no foul” when making your image sandbags.

It seems you like to underlay CSS images with text that resembles them. I’m assuming you do this because when you use CSS for images there is no alt=“” attribute to fill in?

See the comment in the CSS – I use horizontal rules to divide things up for people browsing with CSS disabled – and yes, they’re out there too! Many of the same people I listed above in fact.

Grammatically that’s a paragraph of text (to me) – when I wrote the HTML I wasn’t paying ANY attention to the layout, which lets me put semantic tags around things. DIV are for grouping other tags into sections… for me a sentence or two of text in the middle of the content area? that’s a paragraph – or as in the second one, a heading and a paragraph – I didn’t think that first one warranted a heading. As Carlin said, “Not every ejaculation deserves a name” – to that effect, not every tag needs a extra div around it or a class/id on it.

Don’t know if you noticed, but I also coded it so that the P size can be dynamic to a lot larger a size – up to 512px wide and infinite height. The fixed height background with fixed borders is EXACTLY what I mean when I talk about “non-viable elements” from photoshop designers.

I couldn’t GAMA strip it for IE for some reason, IE7 was choking on it, and as an alpha .png I’d throw it away either. As to the jquery nonsense, that buggy slow fade-in effect was so slow I at first didn’t realize you even HAD animation effects – and in my book relying on some fat bloated garbage rubbish library that has no business being used on ANY website for some “gee ain’t it neat” animooted nonsense is just bad site building. ESPECIALLY given you had NO menu even showing CSS off… So that all had to be thrown away.

You also had a lot of wasted space in-between the elements… and to be honest I’d probably swing an axe at having the text in the image, and instead devise

As you your “designer” – back check some of my posts for opinions on that. I’ll avoid being over the top rude on it this time out… Lemme guess though, drew some goofy picture of what a website might look like so you could shoe-horn content into it? To me starting with photoshop is putting the cart before the horse and a totally ass-backwards approach to web design.

Even when working from the ‘goofy psd’, I usually have to throw it out, and work from scratch even recreating all the images manually because 99.99% of the stuff you can do in photoshop has jack to do with what a browser can/should do or good behavior of websites in a browser. Crappy fixed widths, fixed height background images, elements not designed to handle changes in font sizes, color contrasts below accessibility norm – AND, screen isn’t your only target!!! Between people without CSS, people with CSS and images off, handheld, the endless array of resolutions, font renderers, available system fonts – drawing a pretty picture in photoshop for your “design” phase before you even have semantic markup of the content is the road to failure… which is why when I code from a PSD I first pretend the layout doesn’t even exist, and write my ENTIRE HTML before I even think layout or images.

Semantic markup, progressively enhanced with CSS to make my screen layout, print layout, handheld layout, THEN hang the images on it. When working with the photoshop jokers I often make the page and layout, then hand them a screencap and go “paint something nice over this”.

But then I put usability and accessibility ahead of appearance and silly animations… It was garbage when it was “all flash and no substance” – it’s getting worse with people throwing javascript at content for NOTHING. Of course, I hate animations on effects because I’m also impatient. I mouseover something I want to see that I’m hovering it NOW, not two seconds from now when the fade in is finally visible… I click to open something I want it to open NOW, not five seconds from now after some stupid animation. I click a window to minimize I want it gone NOW, not three seconds from now after some stupid ‘genie’ animated garbage.

Much less, is effectively doubling the page size with a bloated rubbish .js library REALLY worth some stupid fade-in?

Because I also set a background color so that when images are disabled you can actually SEE the menu. NOT everyone using CSS on has images enabled (again, see above)… the background-color overwrites that image, so I have to put that image back in place again over that background color. That’s why the fade from dark to light is a /FAIL/ from an accessibility standpoint as top aligned the background color has to be white, which means images off CSS on the H2 disappears! It’s one of what I often call the “but I can do it in photoshop” moments. Just because it looks pretty in photoshop doesn’t mean it’s viable to code, practical to maintain, efficient to host, or accessible when turned into a website… in fact, usually it hobbles all of the above!

That’s a big thing you SHOULD be designing for and testing for – graceful degradation. You write semantic markup for a useful (though plain) page, you then progressively enhance it with CSS, Images, Scripting (preferably in that order) so that as those “gee ain’t it neat” technologies are missing, the page is still usable. You take your original, turn images off, and you’ve got a giant blank page of nothing (mostly white text on white background).

Check #contentWrapper – I give it bottom padding equal to the footer plus a bit extra to space it away from the content. That way the footer is just riding up over padding!

The sliding the heightWrapper up has never worked reliably for me – it’s a cute trick, but it’s reliance on browsers chopping anything negative positioned in body just fails miserably here for me – and that’s includes Paul’s examples for it.

But then, about 80% of the pages people ask help with here are broken for me since I’m a large font/120dpi Win 7 user running Opera… hence the rewrites.

In regards to images: If text is always better than “alt” why not just do image replacement for all images? The image I have: practical_mirror.png, why could that have not been underlain with text just like the conceptH3.png? I don’t see the difference between the two, yet you coded them differently.

I can see both sides of the argument that you presented. And in the end I guess it comes down to what you think will work best for your situation.

How do you even turn off CSS and images? :lol:

I now agree. When you first start learning HTML/CSS, like I did recently, it seems to rarely be a point of interest when you start out.