How can I get a SPAN to be inline in IE?

This is the element in IE8

This is the element in Firefox

I need the IE version to look like the FF version. How can I style it to do that? The styles are as follows:

.simpleTree
{

    margin:0 0 10px 0;
    padding:10px 0 0 20px;

    overflow:auto;
    width: auto;
    height:250px;
    overf开发者_JS百科low:auto;
    border:1px solid #b7befe;
    border-width:2px 0 1px;
    background:#fff;

}
.simpleTree li
{
    list-style: none;
    margin:0;
    padding:0 0 0 12px;
    line-height: 14px;
}
.simpleTree li span
{
    display:inline;
    clear: left;
    white-space: nowrap;
}
.simpleTree ul
{
    margin:0 0 0 40px; 
    padding:0;

EDIT: Response to comment I added zoom: 1 - no change

EDIT: Added HTML code

<ul class="simpleTree">

<li class="root">

<ul>
<li class="line">&nbsp;</li><li id="13108" class="folder-close"><img border="0" src="images/spacer.gif" class="trigger" style="float: left;"><span class="text">English Language Arts (0)</span><ul class="ajax"><li class="line">&nbsp;</li><li class="doc-last">{url:?q=arisbrowser/ajax/get_tree&amp;getset=g&amp;vid=10&amp;tid=13108&amp;time=&amp;gs=}</li><li class="line-last"></li></ul>
</li>

<li class="line">&nbsp;</li><li id="13109" class="folder-close"><img border="0" src="images/spacer.gif" class="trigger" style="float: left;"><span class="text">Math (0)</span><ul class="ajax"><li class="line">&nbsp;</li><li class="doc-last">{url:?q=arisbrowser/ajax/get_tree&amp;getset=g&amp;vid=10&amp;tid=13109&amp;time=&amp;gs=}</li><li class="line-last"></li></ul>
</li>

<li class="line">&nbsp;</li><li id="13110" class="folder-close-last"><img border="0" src="images/spacer.gif" class="trigger" style="float: left;"><span class="active">Literacy in History/Social Studies, Science, and Technical Subjects (0)</span><ul class="ajax"><li class="line">&nbsp;</li><li class="doc-last">{url:?q=arisbrowser/ajax/get_tree&amp;getset=g&amp;vid=10&amp;tid=13110&amp;time=&amp;gs=}</li><li class="line-last"></li></ul>
</li><li class="line-last"></li>
</ul></li>
</ul>

li span{overflow-x: scroll;white-space: nowrap;}

jsfiddle: http://jsfiddle.net/rc6ck/1/

It appears that the <ul class="simpleTree"> may be inside of another container. A test page or full HTML that contrains the <ul> may help solve the issue.

Try this:

http://jsfiddle.net/ZdzT9/4/

It removes the .d {word-wrap: break-word; } from the containing div.

OK, so you need that. Try this:

http://jsfiddle.net/ZdzT9/6/

This time word-wrap: normal was added to .simpleTree li {}

Not sure how the expand button is styled but try white-space:nowrap