PDA

View Full Version : ie work-around for list wrapping...



NancyJ
09-23-2007, 12:25 PM
I have a list of tags and either side of each tag are + and - buttons. The li's are set to display:inline so they happily sit next to each other and run on to the next line when needed, however I want the + and - buttons to not run on to a new line and to stay 'attached' to their tag. So I set the li to white-space: no-wrap. Which worked great in firefox but in ie (6 & 7) they all stay on the same line now. I tried setting the ul to white-space:wrap but that didn't make a difference.

Fang
09-23-2007, 12:36 PM
Could you give an example

NancyJ
09-23-2007, 02:13 PM
<ul id = "tagcloud">
<li><img src = "minus.png" />Word 1<img src="plus.png" /></li>
<li><img src = "minus.png" />Word 2<img src="plus.png" /></li>
<li><img src = "minus.png" />Word 3<img src="plus.png" /></li>
<li><img src = "minus.png" />Word 4<img src="plus.png" /></li>
</ul>




ul#tagcloud li
{
display:inline;
white-space:no-wrap;
}

Fang
09-23-2007, 02:26 PM
Try this:
ul#tagcloud li
{
white-space:pre;
float:left;
}

NancyJ
09-23-2007, 04:11 PM
no go. They all jumble up like that.

Fang
09-23-2007, 05:05 PM
Works perfectly for the code snippet you gave.

VIPStephan
09-23-2007, 08:33 PM
How about some non-breaking spaces?


<li><img />&nbsp;text&nbsp;<img /></li>


It will insert a small space but you can probably remove it using negative margins or something (or they might not even be that bad).