Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts

    ie work-around for list wrapping...

    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.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Could you give an example

  • #3
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    Code:
    <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>
    Code:
    ul#tagcloud li
    {
     display:inline;
      white-space:no-wrap;
    }

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Try this:
    Code:
    ul#tagcloud li
    {
    white-space:pre;
    float:left;
    }

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    no go. They all jumble up like that.

  • #6
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Works perfectly for the code snippet you gave.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,783
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    How about some non-breaking spaces?
    Code:
    <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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •