Grow your CSS skills. Land your dream job.

[Solved] Footer margin problem in WordPress! – margin ??

  • # July 3, 2010 at 9:32 pm

    Hi I recently watched the designing for wordpress video, and it was AWESOME! But I ran into a problem with the footer. There seems to be a 10px margin on either side of my footer… its really perplexing me. Wheres my margin coming from??

    At first I thought the problem was the footer was inside the page wrap… however I have found that not to be the case.
    -it stays there when I expand the browser.
    -the body color is still behind the footer.

    For an example of this check out http://www.therealcool.com/
    Here is the simplified CSS and Footer :

    Code:
    /*

    THE REAL COOL

    http://www.therealcool.com/

    http://www.therealcool.com/

    */

    /*

    RESET

    */

    * { margin; 0; padding: 0; }
    html { overflow-y: scroll; }
    html, body { height: 100%; }
    body { font-size: 62.5%; font-family: Helvetica, sans-serif; color: #000000;
    background: url(/wp-content/themes/Realcooltheme/images/slice1.jpg) top center repeat-x; }
    ul { list-style: square inside; }
    ol { list-style: decimal inside; }
    a { outline: none; text-decoration: none; }
    a img { border: none; }
    img { vertical-align: middle; }
    table { border-collapse: collapse; }

    /*
    UTILITY
    */

    .clear { clear: both; }

    /*
    STRUCTURE
    */

    #page-wrap { width: 900px; margin: 0 auto -82px; min-height: 100%; height: auto !important; height: 100%; color: #ffffff; }
    #push { height: 82px; }

    /*

    FOOTER
    */

    #footer { margin: 0; padding: 0; height: 82px; background: url(/wp-content/themes/Realcooltheme/images/slice2.jpg) top center repeat-x; }


    And heres the Footer Html Markup

    Code:

    Any ideas? I’m including a screenshot of the problem below and heres that link again:
    http://www.therealcool.com/

    # July 3, 2010 at 11:52 pm

    Major error in your CSS file that will have an effect on every single element:

    * { margin; 0; padding: 0; }

    SHOULD BE:

    * { margin: 0; padding: 0; }

    See the difference?

    # July 6, 2010 at 11:03 pm

    BAM!

    Thank you Doc! You’ve spotted my huge mistake!

    {margin; 0;} doesn’t work… {margin: 0;} = much better.

    Thanks at ton! Its always the problems hidden in plain sight that get me.
    Loads of good karma your direction and have a good day.

    //B

    # June 26, 2013 at 1:34 am

    Hello Doc!

    I recently encounter a littler footer problem as well.
    I have recently empty the cash of my site and ending up with no more footer margin only on my home page….
    [www.delicateandraw.com](www.delicateandraw.com “Delicateandraw.com”) would you have any ideas?

    Thank you 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".