Images in bulleted lists cause line gaps

[SmackMann]

I have the following problem: when I add images to the list items in an unordered list, a few pixels of white space occur above and beneath the list item. Consequently, the images fail to connect together to form a vertical row of images.

I am using IE5.5 (although I would prefer to support NS6 also) under Windows 2000. I have tried setting the line-height, which works fine when using only text, but this is somehow overruled when the image is added. When one of the images is used as bullet, there isn't any white space; but I need the images to be contained in the text after the bullet.

A solution would be greatly appreciated.

 

[crazyboybert]

hi smackmann,

i havent tested this so i dont know if it is a definite solution but have you tried playing with the margin, padding and border style properties eg.

li{border:0px; margin:0px; padding:0px}

it may be that these arent what is causing your white space but it is worth atry if you havent already.

rob

 

[mithrilhall]

Have you tried using:

<DL>
&nbsp;&nbsp;&nbsp;&nbsp;<DD><img src=&quot;blah.gif&quot;>Test</DD>
&nbsp;&nbsp;&nbsp;&nbsp;<DD><img src=&quot;blah.gif&quot;>Test2</DD>
</DL>

 

[mithrilhall]

Oh ya, and the <DL> list will work in Netscape as well.

 

[SmackMann]

Thanks for the help; I did finally get it to work, but not as I expected. Amoung others, I bottom-aligned both the text and the images, changed the ul's and li's into dl's and dd's, and set the line-height to the height of the images (the margins and padding didn't need work). I must conclude that IE5.5 still has a bug in these parts, as it didn't respond to top-aligning at all in contrast to NS6. Rather unexpectedly, it now works to a degree that allows me to continue. Thanks guys!