...

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



NancyJ
09-23-2007, 11:25 AM
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, 11:36 AM
Could you give an example

NancyJ
09-23-2007, 01: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, 01:26 PM
Try this:
ul#tagcloud li
{
white-space:pre;
float:left;
}

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

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

VIPStephan
09-23-2007, 07: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).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum