Whitespace at bottom of background-image?

MagSafe · 5 Feb 2007 at 09:38

Hi folks

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;
}

Augmented · 5 Feb 2007 at 09:56

Looks like the background-image is tiling. Adding background-repeat: no-repeat; to #bottomCurve should fix it (or background: #fff url(graphics/bottomCurve.gif) no-repeat

.

MagSafe · 5 Feb 2007 at 10:13

Thanks for your suggestion, i tried it but the gap is still there

LazyManc · 5 Feb 2007 at 10:27

Try removing the background color on #bottomCurve (currently set to #FFFFFF).

If that doesn't work, try using background-postion property with a set x and y pos.

Augmented · 5 Feb 2007 at 10:33

LazyManc said:
Try removing the background color on #bottomCurve (currently set to #FFFFFF).

Ah yes, that or changing it to transparent will probably do the trick.

MagSafe · 5 Feb 2007 at 11:16

Ah fantastic, that worked perfectly

I changed the background-color to transparent

, so how come theres an area below the background image then :confused:

LazyManc · 5 Feb 2007 at 13:59

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.

MagSafe · 5 Feb 2007 at 16:19

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:

LazyManc · 6 Feb 2007 at 13:17

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   )? This could be forcing the line-height property to override height on certain browsers.

Have you tried

background-position: bottom;

?