Grow your CSS skills. Land your dream job.

CSS Margin Reset not affecting body element

  • # July 10, 2008 at 8:58 am

    I’m working on a page that uses some similar styling as Chris’s new WordPress site shown in the screencasts. Amazing site BTW, Great resource. I started with the footer and I want it to stretch all the way across the bottom of the page (edge-to-edge, I’ll worry about vertical positioning/stickiness later)

    I’m doing the *{} reset, and I’ve used it before, but I’m trying to be cleaner with my CSS this time around. If I use the CSS as shown below, my footer div appears fine on the page (at the top, haven’t styled anything else yet), but I’ve got about a 10px margin all the way around the footer div (Firefox and Safari). I thought the *{} reset applied itself to all elements? I can fix the erroneous margin by adding a "margin0;" to my body styling, but I don’t want to repeat myself if the *{} reset should be getting it.

    Am I missing something about how the body element and the reset work?

    Thanks in advance!

    Here’s the CSS:

    *{
    margin: 0;
    padding: 0;
    }

    body{
    background: url("../images/body-BG.jpg");
    }

    div#footer{
    background: #2c2c2c;
    height: 42px;
    border-top: 5px solid #9b9b9b;
    }

    .V1
    # July 10, 2008 at 11:05 am

    use eric meyer reset

    http://meyerweb.com/eric/thoughts/2008/ … ing-again/

    box
    # July 10, 2008 at 1:11 pm

    In which browser are you noticing this behaviour? And are you using a strict doctype? If not, change your doctype to strict and see if it makes a difference.

    # July 10, 2008 at 7:21 pm

    box, you nailed it. I was using transitional, not strict. I guess I need to read up on their differences and understand why to use one and not the other. That took care of the issue in Firefox and Safari. I really need an intel mac so I don’t have to run freakin’ slow VPC, can everyone just stop using IE? Please?

    Thanks for your help!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".