0

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??? :-/

5
Contributors
6
Replies
9
Views
8 Years
Discussion Span
Last Post by MidiMagic
0

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.

0

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

1

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

Votes + Comments
thanks for telling me about the 0units thing
0

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

0

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>

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.