CSS problem in IE

Question

I have the following code:

DIV><TABLE><TBODY><TR><TD>
<DIV id="namesClass" style="WIDTH: 700px">
    <UL style="MARGIN-LEFT: 0px! important; LIST-STYLE-TYPE: none! important">
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Construction hotel</LI>
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Associations hotel</LI>
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Hotels &amp; Resorts</LI>
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Publishers - Directory &amp; Guide hotel</LI>
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Advertising Specialties hotel</LI>
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Cameras hotel</LI>
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Photographic Equipment &amp; Supplies</LI>
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Premium Goods &amp; Gift</LI>
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Air Conditioning Equipment &amp; Systems hotel</LI>
        <LI style="PADDING-RIGHT: 5px; FLOAT: left">Alcohol hotel</LI>
    </UL></DIV>

</TD><TD vAlign="bottom"><DIV id="moreClass"><SPAN><A href="javascript:addClassifications();">More...</A></SPAN></DIV></TD></TR></TBODY></TABLE></DIV></BODY></HTML>

the problem is: when the li's content is longer than the div's width, the content breaks down but not starting a new line. You can see the result when testing in IE. Firefox and others seem okay. Any help please?

Answer 1

try to not float but display:inline; the lis and set some white-space settings in CSS

Answer 2

Rule 1. If you you float an element, the element it's contained in must have a width.

Rule 2. Inline CSS is a waste of space and obscures what's going on.

Answer 3

1. Try setting a width on the lis
2. Try setting overflow:hidden on the parent ul