IE and multiple float elements

i'm trying to position a number of buttons with float and it works just fine in all browsers. but the Internet Explorer adds some wird element after the 2 floating button (or before the third floating button). Can anybody help me? Here's a picture!

Here's my code:

<style type="text/css">

            .button {
                width:auto;
                height:23px;
                border:1px solid #cccccc;
                border-radius:4px;
                background-image:url('bg_button.jpg');
                background-position:left;
                background-repeat:repeat-x;
                font-family:Tahoma;
                font-size:13px;
                float:left;
                margin-right:4px;
                cursor: pointer;
                padding-right:10px;
            }
...........
</script>


<div class="button">
        <a href=''>
        <div>
            &nbsp;
        </div>
        </a>
    </div>

    <div class="button">
        <a href=''>
        <div>
            Button 1 aksjd fklaj sdklfaj sdlkfasdf  
        <开发者_如何学Python/div>
    </div>

    <div class="button">
        <a href=''>
        <div>
            Button 1    
        </div>
    </div>

---

Put a full-width container around everything and float that.

I can't say for sure it will work (since I can't reproduce it), but in IE floating the parent very frequently helps.

Edit: Never mind.

You can't put a div inside an A. If you do, the browser will close the A before the div and then you have all sorts of weird problems. (And you aren't even closing 2 of your A's.)

Use span instead, and if you need to, put style="display: block;" on the span.