div after img creates unwanted spacing only in firefox

MeruFM · August 28th, 2008, 06:13 PM

15 minutes into coding, I find this problem that's so ridiculously simple yet unfix-able with my current knowledge.

There's a spacing between the images for my nav buttons and the new div I made for my content.
The problem only appears in firefox.
I'll appreciate any help, even a hack would work.

Edit: Opera also has the spacing. Maybe it's IE doing something wrong. Still looking for a fix to it though.
Edit again: I found a temporary fix by making the margins into negatives. But then that screws up IE. This is really starting to annoy me. I now see the importance of the Acid Tests.

Html

Code:

<body>
<div id="center">

<div id="navbar">
     *images for navigation*
</div>

<div id="content">
    <div id="iframe">
    *content*
    </div>
</div>

</div>

</body>

CSS Code

Code:

body {
    margin:0px;
    padding:0px;
    background-color:#333333;
    }
    
/*styles*/
#center {
    margin:150px auto;
    width:780px;
    height: 500px;
    }
    
#navbar {
    width:780px;
    height: 90px;
    }
    
#content {
    background-image: url(../images/cover_r4_c1.png);
    width: 780px;
    height: 410px;
    }

Jack Franklin · August 28th, 2008, 07:09 PM

On the #navbar and #content add:

margin: 0;
padding: 0;

MeruFM · August 28th, 2008, 07:17 PM

Quote:

Originally Posted by Jack Franklin

On the #navbar and #content add:

margin: 0;
padding: 0;

Thanks for trying but it didn't help.

I actually add * {padding: 0; margin: 0; border: 0;} to the top of all css as a habit.

Edit:
Fixed it.
Added "float: left;" to

#content {}

I don't get why but it worked. I guess it's just a requirement to remove margins from div tags.

moojoo · August 29th, 2008, 11:21 AM

floating just takes the element out of the normal document flow. It does not directly affect margins or padding.