SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What's causing this annoying gap?

    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?

    Thanks!

  2. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    body {
      background-color: #FFFFFF;
      font-family: "FilettoReg",Verdana,Tahoma;
      font-size: 12px;
      margin: 0;
    }
    Here is the reset I usually start my style sheet with:

    Code:
    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. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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:

    Code:
    body {
      background-color: #FFFFFF;
      font-family: "FilettoReg",Verdana,Tahoma;
      font-size: 12px;
      margin: 0;
    }
    Here is the reset I usually start my style sheet with:

    Code:
    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;
    }
    Hey Ralph. Why are you including div, a, span, etc in the reset which have no default margin or padding to begin with?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Why are you including div, a, span, etc in the reset which have no default margin or padding to begin with?
    Good question. Time for a review. (Blame Eric Meyer. )

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,623
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Good question. Time for a review. (Blame Eric Meyer. )
    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. #7
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    /* 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •