div after img creates unwanted spacing only in firefox

MeruFM · #1 Aug 28th, 2008, 23:13

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: Select all

<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: Select all

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 · #2 Aug 29th, 2008, 00:09

On the #navbar and #content add:

margin: 0;
padding: 0;

MeruFM · #3 Aug 29th, 2008, 00:17

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 · #4 Aug 29th, 2008, 16:21

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS 'clear float' creates too much gap	cdarnbor	Web Page Design	1	Jul 7th, 2008 01:44
IE Browser Creates Problem	sakibonline	Web Page Design	1	Aug 8th, 2007 13:57
Extra line spacing in Firefox vs IE	bgoo	Web Page Design	6	Apr 16th, 2007 01:17
Page creates horizontal scroll bar in IE	leebridgewater	Web Page Design	1	Mar 5th, 2006 10:23
Firefox creates huge gap? shifts down.	ElmerFud3	Web Page Design	1	Dec 14th, 2005 15:41

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
div after img creates unwanted spacing only in firefox