List elements don't float in IE6

Question

I've seen this issue around the web a ridiculous amount of times, but all so far have been based around <li><a>Test</a></li> etc.

What I'm trying to do, simply is:

<ul>
<li class="title">Test</li>
<li>Test2</li> ** These should float together on the same line **
<li class="title clear">Test</li> ** New Line **
<li>Test2</li>
</ul>

This works fine for me on everything but IE6, in which puts the list elements on seperate lines.

A jsFiddle of this can be found here: http://jsfiddle.net/pjWdg/

Please view on IE6 to notice the error, every other browser works fine.

I've tried:

ul, ul li {
    list-style: none;
    padding:0px;
    margin:0px;
}

.clear {
   clear: both;
}

li.title {
   width: 200px;
}

ul > li {
    float: left;
}

I've also tried:

ul > li {
    display: inline;
}

All to no success. Can anyone shed some light into how I can make this work? Thank you!

** UPDATE **

Now, after removing the > in the list style, I've got:

http://jsfiddle.net/pjWdg/1/

You can still see this is wrong, with Test2 appearing next to Test3?

Answer 1

Try These Changes in your style sheet.

ul, ul li {
list-style: none;
padding:0px;
margin:0px;
}

.clear {
clear: both; 
}

li.title {
 width: 200px;
  float:left;

}

Answer 2

IE6 doesn't support the child selector >

Use ul li to target your li's instead.