Grow your CSS skills. Land your dream job.

FireFox Margin Bug

  • # January 24, 2009 at 7:55 pm

    I’ve been searching around for an answer but have yet to find one, so I was hoping someone here could help. This problem only exists in Firefox, I’ve tested in Safari (osx), Firefox (osx), and IE6 (pc).

    When I try to apply a bottom-margin: 10px; to my navigation wrapper (in order to separate it from the content below) BOTH the navigation AND the content wrapper get the margin style applied in FireFox. In Safari and IE6 it works – I figured it would totally break in IE6 but it doesn’t.

    HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    HELLO?


    CSS

    Code:
    body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
    font-color: #272727;
    line-height: 16px;
    background:url(../images/01backgrad.png) repeat-x top;
    background-color: #0D344F;
    }

    .clearContent{clear:both;}

    #wrapper {
    margin: 0px auto;
    padding: 0 0 0 0;
    border: 0px solid #272727;
    width: 1024px;
    background: url(../images/02shadow.png) no-repeat top;
    }

    #container {
    margin: 0px auto 0px auto;
    width: 900px;
    }

    /* NAVIGATION STYLES */

    #navigation {
    margin: 0 0 10px 0;
    padding: 0 0 0 0;
    width: 900px;
    background-color: #990000;
    }

    #mainNav {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    float:left;
    width: 796px;}

    #mainNav ul {
    margin: 0;
    padding: 0;
    list-style-type:none;
    }

    #mainNav li {
    margin: 0 0 0 0;
    padding: 0 10px 0 0;
    float:left;
    color:#FFFFFF;}

    any suggestions or help would be greatly appreciated.
    thanks.

    # January 24, 2009 at 8:09 pm

    Providing a url will help. It’s tough just looking at code.

    A couple notes though:

    "margin: 0 0 0 0;" can just be "margin: 0;", makes it easier to read.

    "margin: 0px auto;", change to "margin: 0 auto;", it hasn’t actually been confirmed anywhere, but there was some talk about "0px" instead of just "0" causing some issues.

    You probably don’t need TWO clears.

    "border: 0px solid #272727;" will have no border, you can remove that whole line.

    # January 24, 2009 at 8:38 pm

    okay. here’s a URL http://savagecorp.com/firefox/firefoxtest.html that you can test off of.

    I cleaned up the CSS a bit, as requested.

    I knew the "border: 0px solid #272727;" will have no border, but i was using that to test; this is also why there were two clears… so i took one out.

    * The only way past this that I have discovered is to make a 10px high div with nothing in it.
    It’s not something I really want to do, but after 2 hours of nothing, it’s all I got.

    * Could this have anything to do with DocType ?

    # January 24, 2009 at 9:51 pm

    This is really weird. Really, really weird. It works when I add a 1px border…. ridiculous. I also cleaned things up a bit (for example removing the mainNav div and just making it into one UL. Maybe someone knows why the 1px border is making it work.
    New CSS:

    Code:
    @charset “UTF-8″;
    /* CSS Document */

    * {
    margin:0;
    padding:0;
    }

    body {
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
    font-color: #272727;
    line-height: 16px;
    background-color: #0D344F;
    }

    .clearContent{clear:both;}

    #wrapper {
    margin: 0 auto;
    width: 1024px;
    }

    #container {
    margin: 0 auto;
    width: 900px;
    }

    /* NAVIGATION STYLES */

    #navigation {
    margin-bottom:10px;
    width: 900px;
    border:1px red solid; /* removing this border causes the problem, WTF? */
    background-color: #990000;
    }

    #mainNav {
    background:blue;
    width:796px;
    float:left;
    list-style-type:none;
    }

    #mainNav li {
    padding: 0 10px 0 0;
    float:left;
    color:#FFFFFF;}

    And HTML:

    Code:


    HELLO?

    # January 24, 2009 at 11:35 pm

    exactly! this is mind boggling !!

    # January 28, 2009 at 2:21 am

    setting the containing DIV’s to a position of Relative fixed the problem.

    # January 28, 2009 at 2:27 am
    "savage" wrote:
    setting the containing DIV’s to a position of Relative fixed the problem.

    Aaaahhhhhh yes. Sorry, that should’ve been one of the first things I suggested. Good job!

    # January 28, 2009 at 5:02 am

    simply float the navigation div to left

    # June 16, 2009 at 11:40 am

    Set the padding of the div to 0.01px;
    padding:0.01px;

    [bows] Thankyou, thankyou… :)

    # April 9, 2013 at 1:39 pm

    >>SAVAGE
    Extra idea! Thank you so much :)

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

You must be logged in to reply to this topic.

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