Random spacing between DIVs in Firefox

July 1, 2009 at 19:09:43
Specs: Windows Vista

I need help with what seems so basic, but yet I cannot figure out what the problem is. First off, here is a link to the ZIP of the html/css/img files.

Here is my problem. I have 3 DIVs sitting inside of a main DIV. These 3 DIVs are supposed to be sitting stacked on top of eachother flush.

When viewed in IE and Firefox as is, you can see there is spacing between the DIVs in Firefox, but IE displays them the way I want them to be.

Here is the weirdest part, now try uncommenting all the 4 Border attributes in the CSS file, save and preview the html. This time around, they are being displayed properly in both Firefox and IE. The problem is I obviously dont want the border. The second problem is what is causing the spacing in firefox, this makes no sense.

Someone help me pls.

See More: Random spacing between DIVs in Firefox

Report •

July 2, 2009 at 03:47:31
It's the H3. Zero their margin and problem begone.

eg: h3 { margin: 0; }

Almost all browsers will apply some margin to some tags such as heading tags, and paragraph.


Report •

July 2, 2009 at 04:03:01
and btw afaik "none" is not a valid background-color value. You should use "transparent" or just skip the declaration.


Report •

July 2, 2009 at 06:59:32
OMG.....THANK YOU!!! I'm about to freak out. I have been trying to debug this for almost 1 week. I actually changed layouts cos I was having problems with my original layout....now only to find out it is the damn H3 tags. I really appreciate the help and quick response.

Report •

Related Solutions

July 2, 2009 at 07:02:32
While I'm at it if you don't mind, do you have any suggestions how to center the main DIV horizontally on the screen, so the page always sits centered no matter the resolution. I google'd various methods and tried them with some minor problems, but maybe the H3 tags where screwing thing up all along.

Report •

July 2, 2009 at 07:14:17
^ to achieve that I'll wrap everything in a main wrapper, apply a width (if it's fixed) and left-right auto margin.

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

<div id="wrapper">

content here



I also got used to this:

body { margin: 0; padding: 0; }

and starts the "real layout" in a div tag inside the body (the #wrapper div above for example).

I have a feeling that directly modifying the body's margin/padding/width is kind of "unsafe"... But maybe it's just me. :D


Report •

July 2, 2009 at 07:18:30
Thanks a lot...it is amazing how 1 little thing can screw up an entire layout!!

Report •

Ask Question