a space between divs that I can't eliminate

[stymied2]

Hi,

The header of this page is all images arranged in rows using div tags. I set img {vertical-align: bottom} in the css to remove spaces below the images in FF which worked well. But, I am now left with a space above the bottom row of my header that I just can't seem to get rid of.

http://www.propellerheadgroup.com

The CSS is as such:

body {
	margin-top: 0px;
	text-align: center;
	background-color: #0066ff;
	}
img {
	vertical-align: bottom;
	}
#container {
	width: 863px;
	margin-left: auto;
	margin-right: auto;
	}
#header {
	padding: 0px;
	margin: 0px;
	}
#content {
	height: 552px;
	background-image: url(../images/crown_full.jpg);
	background-repeat: no-repeat;
	}
#footer {
	height: 44px;
	background-image: url(../images/footer.jpg);
	background-repeat: no-repeat;
	}

Any suggestions??? :-/

[buddylee17]

You have to understand that each browser sets a certain amount of white space between each element. Please read no margin for error. You'll have to reassign the problem elements to have 0 margin and padding. Also remember that 0px = 0 pizzas = 0 cigarettes. 0=0, regardless of what it represents, so just keep it simple. Just make it 0.

[wickedsunny]

seems solved to me. anyways u can use this tag in ur container or where u dont want white space. margin-top:0px;

[peter_budo]

seems solved to me. anyways u can use this tag in ur container or where u dont want white space. margin-top:0px;

You may want to read a post by MidMagic in this thread

[wickedsunny]

omg thts why i face these kinda troubles so much in my websites :( thank u soo much buddy ur a life savior :D u got an additional reputation from me

[stymied2]

Thanks for the help. The 'margin for error' article made perfect sense as did the suggestion to remove units of measurement when using 0.

Unfortunately, explicitly assigning each div to a margin and padding of 0 still didn't resolve my challenge. The weird thing was it happened to only one particular div no matter where I placed it and only when using one particular image. I could not see how that was happening. According to FireBug, the browser was making the div 20x high even though the image was only 14px. None of the other divs, although set up the exact same way, were doing that. After admitting to myself that I probably needed to get on with my life I tried just using an empty div with the necessary image in the background and setting the height there - which worked fine. I'm still not sure what was going on - and it was the same in both FF and IE. <shrug>

[MidiMagic]

Check for an anomaly in an image. It might have one extra vertical pixel.

I went bonkers trying to eliminate such a space, and found that one of the images had an extra row of pixels, all white, at the bottom. This made the browser make that row one pixel higher, displaying a white background below the other images in the row.