Forums

savage

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:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>firefox margin bug</title>


<link href=\"styles/foresight_main.css\" type=\"text/css\" title=\"Foresight Styles\" rel=\"stylesheet\" />

</head>

<body>

<div id=\"wrapper\">
	<div id=\"container\">
    	
        <div id=\"navigation\">
            <div id=\"mainNav\">
                 <ul>
                	<li>HOME</li>
                    <li>HOME KITS</li>
                    <li>OFFICE/ SCHOOL KITS</li>
                    <li>PET KITS</li>
                    <li>ADD'L SUPLIES</li>
                    <li>SURVIVAL STORIES</li>
                    <li>FEMA LINKS</li>
                    <li>SEARCH</li>
                </ul>
            </div><!-- -->
            <div class=\"clearContent\"></div>
        </div><!--END NAVIGATION -->
        <div class=\"clearContent\"></div>
        HELLO?
    </div><!-- END CONTAINER -->
</div><!--END DIV WRAPPER -->

</body>
</html>

CSS

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.

TheDoc

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.

savage

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 ?

TheDoc

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:

@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:

 <div id=\"wrapper\">
       <div id=\"container\">
           
            <div id=\"navigation\">
                    <ul id=\"mainNav\">
                       <li>LINK 1</li>
                        <li>LINK 2</li>
                        <li>LINK 3</li>
                        <li>LINK 4</li>
                        <li>LINK 5</li>
                        <li>LINK 6</li>
                        <li>LINK 7</li>
                        <li>LINK 8</li>
                    </ul><!-- -->
                <div class=\"clearContent\"></div>
            </div><!--END NAVIGATION -->
            HELLO?
        </div><!-- END CONTAINER -->
    </div><!--END DIV WRAPPER -->

savage

exactly! this is mind boggling !!

savage

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

TheDoc

"savage" said:
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!

Ramesh

simply float the navigation div to left

greatbigmassive

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

[bows] Thankyou, thankyou... :)

Maya_RS

SAVAGE Extra idea! Thank you so much :)

treehouse : what would you like to learn today?

Forums

FireFox Margin Bug