Whitespace at bottom of background-image?

Associate
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
Hi folks :)

imageGap.jpg


I have a strange problem with whitespace at the bottom of a background image. I've tried setting line-height: 0; and display: block; on the div but can't seem to figure out whats causing it. Its happening in both Firefox & IE so its not like its an annoying IE issue :confused:

I don't suppose anyone has any ideas and could lend a hand?

Thanks :)

index.htm
Code:
		<div id="wrapper">
			<div id="header"><a href="http://www.test.net/" title="Test"><img src="graphics/logo.gif" alt="Test" width="170px" height="79px" class="noborder" /></a></div>
			
			<div id="content">
			test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, 
			test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, 
			test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, 
			test, test, test, test, test, test, test, test, test, test, test, test, test, test, test, 
			</div>
			<div id="bottomCurve"></div>
		</div><!--end of wrapper-->

styles.css
Code:
#wrapper
{
	margin: 40px auto 0 auto;
	padding: 0;
	width: 770px;
	font: normal 10pt arial, helvetica, sans-serif;
	color: #000000;
}

#header
{
	margin: 0;
	padding: 0;
	height: 79px;
	font: normal 10pt arial, helvetica, sans-serif;
	color: #000000;
}

#content
{
	margin: 0;
	padding: 0;
	height: 500px;
	font: normal 10pt arial, helvetica, sans-serif;
	background: #ffffff;
	color: #000000;
}

#bottomCurve
{
	margin: 0;
	padding: 0;
	width: 770px;
	height: 17px;
	font: normal 10pt arial, helvetica, sans-serif;
	background: #ffffff url('graphics/bottomCurve.gif');
	color: #000000;
}
 
Associate
Joined
21 May 2003
Posts
1,365
The background colour is like a base layer applied to the element before the background image - because your image has transparent sections you can see the background colour through them.

It's useful to be able to specify both because if someone is browsing your site with images disabled for some reason then you can still have some semblance of styling to the element.
 
Associate
OP
Joined
12 Aug 2004
Posts
1,009
Location
Glasgow, Scotland
but my image doesn't have transparent sections? the div that the background-image is set to is the same size as the actual image, so there shouldn't be any 2px area at the bottom :confused:
 
Associate
Joined
21 May 2003
Posts
1,365
Ah, I assumed the corners were using transparency, which was daft as it would've been white showing through if that was the case.

Is there any non-printing text inside the div (such as a non-breaking space &nbsp; )? This could be forcing the line-height property to override height on certain browsers.

Have you tried

background-position: bottom;

?
 
Back
Top Bottom