What's causing this annoying gap?

HTML & CSS
1

Hi there,

Okay, so I’ve just got into using CSS for all of my layout of my design (migrated from horrible tables and I’m all the better for it! learning all the time).

Anyway, I’ve just added a “sticky” footer to my work-in-progress site and there’s an annoying white gap of about 5-6 pixels which is really annoying me. I’ve looked right the way through my CSS and can’t figure out why it’s doing it.

I wouldn’t mind so much if I could have the footer slammed against the left-hand side but it won’t budge no matter how much margin or padding I give or take. I’ve also noted that the footer div is outside of the main container so really there shouldn’t be a problem. Nothing is showing up in the body either to give this strange behaviour.

Link: Animation, Web Design, SEO | PsychoBeing - The Portfolio Of Andrew Courtney

Any ideas please? :slight_smile:

Thanks!

2

add:
left: 0px;

Off Topic:

and change from background image to background color, you are waisting page load time by lôading that image for your footer

looks good

3

It looks like the browser’s default margin on the <body> element. (Most people zero out all margins and paddings with a CSS reset to avoid problems like this.)

Anyhow, try this:

body {
  background-color: #FFFFFF;
  font-family: "FilettoReg",Verdana,Tahoma;
  font-size: 12px;
  [COLOR="Red"]margin: 0;[/COLOR]
}

Here is the reset I usually start my style sheet with:

html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    vertical-align: bottom;
}
4

Hey Ralph. :slight_smile: Why are you including div, a, span, etc in the reset which have no default margin or padding to begin with?

5

Good question. Time for a review. (Blame Eric Meyer. :smiley: )

6

I used to have a couple of the same neglects in mine. Because Eric Meyers also has a few other things in there along with margin and padding. You remove all that baseline crapola but then forget to remove the other stuff.

7

Hey guys,

Thanks very much for the help and advice, it’s looking good now :).
Sorry for the late reply, been busy with other work.

Cheers!

8

Meyer’s resets aren’t resets for many of the properties – it borders on being a CSS framework; and like most CSS frameworks it ends up being a pointless/redundant waste of code… Especially all the stating elements that inherently lack any of the values being reset unless you REALLY give a flying fig about Nyetscape 4.

It’s why the 252 byte reset I use:


/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

Only hits the things I find it handy to have reset. SOMETIMES I’ll add DL/DD/DT to it, but I only add to it as I actually NEED it.

The massive, monstrous pointless ones I often see used just make me shake my head – it’s not wonder people rail against reset’s use given some of the garbage out there.