IE6 Bottom Border / Margin / Padding 3px Gap

List Element with Image inside

[nate4cfdev]

Here's my HTML:

<li class="productColor" style="border: 1px solid rgb(57, 56, 55); display: inline; cursor: pointer;">
<img width="20" height="20" alt="White" src="/buttonsColored/white.gif"/>
</li>

Here's my CSS:

element.style {
border-bottom-color:#393837;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:#393837;
border-left-style:solid;
border-left-width:1px;
border-right-color:#393837;
border-right-style:solid;
border-right-width:1px;
border-top-color:#393837;
border-top-style:solid;
border-top-width:1px;
cursor:pointer;
display:inline;
}
ul.colorSelectList li {
cursor:pointer;
float:left;
width:20px;
height:20px;
list-style-type:none;
margin-right:6px;
margin-top:2px;
}

Why is there 3px of space below my image between the image and the bottom border? Any clue?

[AlishahNovin]

Quick suggestion:

Try

<li class="productColor" style="border: 1px solid rgb(57, 56, 55); display: inline; cursor: pointer;"><img width="20" height="20" alt="White" src="/buttonsColored/white.gif"/></li>

(Notice there is no space between the <li>, <img/> and </li>, it just appears as <li><img></li>, you may just have a trailing space in there)