Displaying image on the bottom of the DIV tag

I have a problem with displaying image on the bottom of the DIV tag. It seems, that some kind of margin is beeing left down there.

I've created class for my DIV tag:

div.menu
{
position: absolute;
top: 50px;
left: 300px;
background-color: grey;
width: 150px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}


and class for my image:

img.menu2
{
border: 0px;
width: 150px;
height: 30px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

and in HTML:
<div class="menu">
<img src="top.jpg" class="menu1" />
<li>1
<li>2
<li>3
<img src="top.jpg" class="menu2"/>
</div>

And as You can see here -> http://img183.imageshack.us/img183/6810/blankha9.jpg" there is some space left down there. How can I fix it?

 

I'm not sure, but it's likely IE doing the "it's an inline element so I think there might be text so I'll make room on the bottom for the danglie-letters" thing. Yeah, technically an image is inline. So it's making space for letters that dangle (descenders I think they're called). Like pgqj...

Setting display: block in your CSS often cures this. Try it.

 

Well, being that your 'list' should be in a LIST tag, and that your 'HTML' example is invalid markup...

and that your 'images' are likely presentational, meaning they shouldn't even BE image tags, but applied as a background to existing elements...

<div class="menu">
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
  </ul>
</div>

Code (markup):

pad the bottom of #menu and put the bottom image on it as a background, pad the top of UL and put the top image on it as a background - end of problem.