FireFox Margin Bug

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

Code:

• HOME
• HOME KITS
• OFFICE/ SCHOOL KITS
• PET KITS
• ADD’L SUPLIES
• SURVIVAL STORIES
• FEMA LINKS
• SEARCH

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.

[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 ?

[savage]

exactly! this is mind boggling !!

[savage]

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

[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 :)

[Author]

Posts