Gap below image in a div

aka Rohan posted this at 19:27 — 23rd January 2007.

Joined: Feb 2006

I can't seem to get rid of an annoying gap that appears below an image in my div.

You can see it at the bottom of the text 'box' here. What I've done is have the laft and right borders made up from a thin image repeated vertically as the main divs background and then the top and bottom borders formed from two images inserted before and after the text. The problem is the gap below the bottom image lets a pixel of two of the background be seen.

My css for this div is as follows:

.text{
        width: 510px;
	background: url(../images/text_bg.gif) repeat-y center #fff;
	text-align: left;
	margin: 0 auto 1em auto;
	clear: both;
}

.text p{
  padding: 1em 4em;
}

Any ideas, this is doing my nut?

andy206uk posted this at 20:28 — 23rd January 2007.

He has: 1,758 posts

Joined: Jul 2002

The space you are referring to is in the image at the bottom - make the background transparent and it should go away.

aka Rohan posted this at 20:14 — 24th January 2007.

He has: 200 posts

Joined: Feb 2006

Thanks for the replies guys.

andy206uk;213958 wrote: The space you are referring to is in the image at the bottom - make the background transparent and it should go away.

I don't think it's the image background that's the problem as the white space is fine. The gap i'm refering too is a space btween the bottom image (of which the white space is part) and the end of the Div. This space allows the image being used as the Divs background to show thus two small bits of brown are seen (the background image makes up the vertical stripes).

Renegade;213967 wrote: Do you tab your code? It could be the extra white space between elements.

That doesn't seem to help either. However the problem seems to be limited to firefox/opera. IE is displaying it fine.

Renegade posted this at 00:03 — 24th January 2007.

He has: 3,022 posts

Joined: Oct 2002

Do you tab your code? It could be the extra white space between elements.

Try changing something like this:

<div>
  <img src="image.gif" width="110" height="100" alt="" title="" />
</div>

To something like this:

<div><img src="image.gif" width="110" height="100" alt="" title="" /></div>

See if that helps.