Adding whitespace between <li> elements

[Rachael]

I need to add whitespace between the <li> elements that get generated as part of the HTML output of the RadTagCloud and I can't figure out how to do it.  It's causing a problem in my design in IE 7.

I've attached a screenshots of the page in IE7 (not working - text "escapes" outside the yellow Frequently Searched Terms box) and IE8 (working - text is confined inside the yellow Frequently Searched Terms box).

Viewing the source of my page shows this is the HTML output of the cloud control:

<!-- 2010.2.713.40 --><ul class="rtcTagList">

<li class="rtcTagItem"><a href="/issues/1/agriculture-food-nutrition.aspx" rel="tag" title="Agriculture, Food, Nutrition" style="font-size:10px;">Agriculture, Food, Nutrition</a></li><li class="rtcTagItem"><a href="/issues/2/commerce-industry.aspx" rel="tag" title="Commerce &amp; Industry" style="font-size:11px;">Commerce & Industry</a></li><li class="rtcTagItem"><a href="/issues/3/culture-media.aspx" rel="tag" title="Culture &amp; Media" style="font-size:10px;">Culture & Media</a></li><li class="rtcTagItem"><a href="/issues/4/education-labor.aspx" rel="tag" title="Education &amp; Labor" style="font-size:13px;">Education & Labor</a></li><li class="rtcTagItem"><a href="/issues/5/energy.aspx" rel="tag" title="Energy" style="font-size:11px;">Energy</a></li><li class="rtcTagItem"><a href="/issues/6/environment-natural-resources.aspx" rel="tag" title="Environment &amp; Natural Resources" style="font-size:13px;">Environment & Natural Resources</a></li><li class="rtcTagItem"><a href="/issues/7/government-operations-budget.aspx" rel="tag" title="Government Operations &amp; Budget" style="font-size:11px;">Government Operations & Budget</a></li><li class="rtcTagItem"><a href="/issues/8/health-human-services.aspx" rel="tag" title="Health &amp; Human Services" style="font-size:15px;">Health & Human Services</a></li><li class="rtcTagItem"><a href="/issues/9/immigration.aspx" rel="tag" title="Immigration" style="font-size:11px;">Immigration</a></li><li class="rtcTagItem"><a href="/issues/10/international-relations-trade.aspx" rel="tag" title="International Relations &amp; Trade" style="font-size:20px;">International Relations & Trade</a></li>

</ul><input id="ctl00_ctl00_ctl00_cphBody_cphContent_cphContent_fsProfile_cldTerms_ClientState" name="ctl00_ctl00_ctl00_cphBody_cphContent_cphContent_fsProfile_cldTerms_ClientState" type="hidden" />

As you can see, the <li> elements are all jammed together with no carriage returns, spaces, tabs, nothing, which is not standard.  At a minimum, you'd write an unordered list like this:

<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

If I view source of my page, copy all the HTML and put it in a new static HTML page with carriage returns between the <li> elements as I indicated in the example above, the page displays correctly in both IE7 and IE8. So I ultimately need the HTML output of the TagCloud to look like this:

<!-- 2010.2.713.40 --><ul class="rtcTagList">

<li class="rtcTagItem"><a href="/issues/1/agriculture-food-nutrition.aspx" rel="tag" title="Agriculture, Food, Nutrition" style="font-size:10px;">Agriculture, Food, Nutrition</a></li>
<li class="rtcTagItem"><a href="/issues/2/commerce-industry.aspx" rel="tag" title="Commerce &amp; Industry" style="font-size:11px;">Commerce & Industry</a></li>
<li class="rtcTagItem"><a href="/issues/3/culture-media.aspx" rel="tag" title="Culture &amp; Media" style="font-size:10px;">Culture & Media</a></li>
<li class="rtcTagItem"><a href="/issues/4/education-labor.aspx" rel="tag" title="Education &amp; Labor" style="font-size:13px;">Education & Labor</a></li>
<li class="rtcTagItem"><a href="/issues/5/energy.aspx" rel="tag" title="Energy" style="font-size:11px;">Energy</a></li>
<li class="rtcTagItem"><a href="/issues/6/environment-natural-resources.aspx" rel="tag" title="Environment &amp; Natural Resources" style="font-size:13px;">Environment & Natural Resources</a></li>
<li class="rtcTagItem"><a href="/issues/7/government-operations-budget.aspx" rel="tag" title="Government Operations &amp; Budget" style="font-size:11px;">Government Operations & Budget</a></li>
<li class="rtcTagItem"><a href="/issues/8/health-human-services.aspx" rel="tag" title="Health &amp; Human Services" style="font-size:15px;">Health & Human Services</a></li>
<li class="rtcTagItem"><a href="/issues/9/immigration.aspx" rel="tag" title="Immigration" style="font-size:11px;">Immigration</a></li>
<li class="rtcTagItem"><a href="/issues/10/international-relations-trade.aspx" rel="tag" title="International Relations &amp; Trade" style="font-size:20px;">International Relations & Trade</a></li>

</ul><input id="ctl00_ctl00_ctl00_cphBody_cphContent_cphContent_fsProfile_cldTerms_ClientState" name="ctl00_ctl00_ctl00_cphBody_cphContent_cphContent_fsProfile_cldTerms_ClientState" type="hidden" />

Is it possible to do this?  If so, how?

[Pero]

Hi Rachael,

I am not sure whether the absence of carriage returns and whitespace between the <li> elements, causes the problem under IE7 browser, since I tested the HTML that you provided and did not experience such problem. I think that this is a CSS related issue. That's why I would like to ask you to provide a sample project that will help us reproduce the issue locally. You can also provide a live URL where we can observe the behavior.

Greetings,
Pero
the Telerik team

[Rachael]

For anyone interested in the solution, IE6 & 7 have problems with <li>s that don't have whitespace between the <li> elements. While there isn't a way that I know of to add whitespace BETWEEN the <li> elements, if you append a space on to the end of the text INSIDE the <li> elements it achieves the same effect.  To do this, handle the ItemDataBound event of the TagCloud and modify the text property of every item by appending an extra space.  For example,

<telerik:RadTagCloud ID="cld" runat="server" DataTextField="[YOUR DATA TEXT FIELD]" DataWeightField="[YOUR WEIGHT FIELD]" OnItemDataBound="cld_ItemDataBound" />

protected void cld_ItemDataBound(object sender, Telerik.Web.UI.RadTagCloudEventArgs e)

{

    e.Item.Text += " ";

}