Text clipping. How can I fix this?

I am using ASP.net (should be transparent in this case).

The page is generated alright. The page has fieldset, divs and tables
and other HTML elements like text box, drop downs etc; all are
standards. Also, the page is formatted/decorated using CSS.

Here is the issue:
HTML generated is alright. Except:
1. IE the text is clipped instead of wrapping the text around inside
the fieldset/div. Even the right side of the fieldsets border is not
shown as it is extended and I am assuming "pushed" below the adjacent
element.
2. FF if text is long it does not wrap nor it is clipped instead it
shows over its neighboring elements, which in my case is a table
adjacent.

Code:
The generated output:
<div style="display:block;" id="div_words" align="left">
<fieldset>
<legend>Phrase</legend>
<ul>
<li>
<a href='meaning.aspx?phrase=worrd1 what is this' >worrd1 what is
this</a>
</li>
&middot;&nbsp;
<li>
<a href='meaning.aspx?word=word this sould wrapped and all words
should be visible'>word this sould wrapped and all words should be
visible</a>
</li>
&nbsp;&middot;&nbsp;
<li>
<a href='meaning.aspx?word=info again should not be clipped or
flow over adjacent element'>info again should not be clipped or flow
over adjacent element</a>
</li>
</ul>
</fieldset>
</div>

CSS:
#div_words {float: left}
#div_words ul li{ list-style-type: none; float:left; margin: 0 10 0
-18; text-align:left; text-indent:0; color:#000}

Questions:
How can I fix this?

Additionally,
If you see the HTML I am using &nbsp;&middot;&nbsp; as seperator
between words, but in FF the &middot; is rendered before the words. How
can I fix this? I can live without this, my first need is how to fix
the clipping and overflowing of text.

Thanks.

zeyais (AT) gmail (DOT) com wrote:

I am using ASP.net (should be transparent in this case).

The page is generated alright. The page has fieldset, divs and tables
and other HTML elements like text box, drop downs etc; all are
standards. Also, the page is formatted/decorated using CSS.

Here is the issue:
HTML generated is alright.

No it's not: both the HTML and CSS are invalid. Fix that and see what
happens.

Except:
1. IE the text is clipped instead of wrapping the text around inside
the fieldset/div. Even the right side of the fieldsets border is not
shown as it is extended and I am assuming "pushed" below the adjacent
element.
2. FF if text is long it does not wrap nor it is clipped instead it
shows over its neighboring elements, which in my case is a table
adjacent.

Code:
The generated output:
div style="display:block;" id="div_words" align="left"
<fieldset
<legend>Phrase</legend
<ul
<li
<a href='meaning.aspx?phrase=worrd1 what is this' >worrd1 what is
this</a
</li
&middot;&nbsp;

That is invalid HTML. Only LI elements can be the children of UL
elements. What a browser may do with it is a result of error correction
and likely to be inconsistent.


[...]

CSS:
#div_words {float: left}
#div_words ul li{ list-style-type: none; float:left; margin: 0 10 0
-18; text-align:left; text-indent:0; color:#000}

CSS lengths must have units specified unless they are zero. Setting the
left margin to -18 causes the element to overlap the one on it's left.

Questions:
How can I fix this?

Additionally,
If you see the HTML I am using &nbsp;&middot;&nbsp; as seperator
between words, but in FF the &middot; is rendered before the words. How
can I fix this? I can live without this, my first need is how to fix
the clipping and overflowing of text.

Fix the invalid HTML & CSS.



--
Rob