Internet Explorer inline border bug

Question

I have a list and each list element is inline. I add border to the li a elements, but every row except the first row, it cut out the border and padding. It works in every browser, except Internet explorer 7. Do you have any solution?

alt text http://www.freeimagehosting.net/uploads/88ca5acd54.jpg

<div class="container">
<ul>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 12</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 5</li>

    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 4</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 3</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 2</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 2</li>

    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>

    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    <li>
        <a class="temakor" href="*" >??</a>&nbsp;x 1</li>
    </ul>
</div>

CSS:

    .container{
        padding: 5px 10px;
        width: 200px;
    }

    ul{
        list-style-type: none;
    }

    li{
        display: inline;
        line-height:30px;
    }

    li{
        color: #35a9e5;
        font-weight:bold;
        white-space:nowrap;
    }
        .temakor{
            color:#a2a2a2;
            background-color:#3B3B3B;
            border:2px solid #678194;
            padding:3px 10px;
        }

Answer 1

Padding will not work the same on an inline element as it does on a block element.