Why do I get a gap between this tab list and content pane in IE6?

I'm trying to set up a tab list using an unordered list and CSS. This looks fine in IE7, Chrome, FF, but not in IE6. In IE6, it renders with a gap between the tabs and the content pane and I am struggling to find out why.

HTML

<ul class="ptl_tablist">
  <li><a href="#">Tab One</a></li>
  <li><a href="#">Tab Two</a></li>
  <li class="selected"><a href="#">Tab Three</a></li>
  <li><a href="#">Tab Four</a></li>
</ul>

<div class="ptl_tabcontent">
Content here: <input type="text" /&g开发者_运维问答t;
</div>

CSS

body { font-family: arial; font-size: 10pt; }

/* Remove bullets */
.ptl_tablist { list-style: none; margin: 0; padding: 0; }

/* Grey border around inactive tabs */
.ptl_tablist li { border: solid 1px #BBB; border-bottom-width: 0; float: left; margin: 0; }

/* Block anchors, grey background, wide padding */
.ptl_tablist li a {
    background: none repeat scroll 0 0 #EEE;
    padding: 2px 15px;
    display: block;
    text-align: center;
    display: block;
    text-decoration: none;
}

/* Black border around selected tab */
.ptl_tablist li.selected { border-color: #000; }

/* Selected anchor */
.ptl_tablist li.selected a {
    background: none repeat scroll 0 0 #FFF;
    font-weight: 700;
    position: relative;
    top: 1px;
}

/* Yellow background for hovering over inactive tabs */
.ptl_tablist li a:hover { background: none repeat scroll 0 0 #FFFF70; }

/* White background for hovering over active tab */
.ptl_tablist li.selected a:hover { background: none repeat scroll 0 0 #FFF; }

/* Content under tabs. Clear floating tabs. Pad and border. */
.ptl_tabcontent { border: solid 1px #000; padding: 10px 3px 3px 3px; clear: both; }

jsFiddle http://jsfiddle.net/s7yZw/1/

---

Exchange the clear:both on the .pt1_tabcontent for a zoom:1;

.ptl_tabcontent { border: solid 1px #000; padding: 10px 3px 3px 3px; zoom:1; }

---

Float the tabs (LI) left, and the A's too. Then use clearfix on the UL.