Gap between image and border

[abathor]

I have an image which I have placed a border around with css like so:

div#mainBackground
{
border:1px solid #000000;
}

But as you can see from the image, there is a small gap between the bottom of the image and the border around it. I can't work out why. Any suggestions?

[zombie@computer]

if its a solid color, why not use the color: styles ?

Since you are using a JPG with one color, did you make it 1px*1px ? any larger may change colors slightly due to compression, leaving effects like the one you are describing

Not sure if thats the cause of your problem, but its work a shot.

[dissonance]

i'd suggest border:'ing the <img>, not the <div>.
also try img#whatever { padding: 0px; } or { margin: 0px; }. I forget which one is correct.

[dissonance]

oh, and make sure you're terminating the <img> if this is xhtml like so: <img src="foo/bar.jpg" /> and delete any <br/>s in the area.

[zombie@computer]

hey, you edited your question, now my reply looks out of place. Poop

[abathor]

hey, you edited your question, now my reply looks out of place. Poop

Sorry, problem now solved anyway!