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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Cross-browser: Non-breaking space

    Hey guys,

    I have a breadcrumbs list that shows users what page they are browsing relative to the main page. The list is made using an ul and after each link in every list item (except for the last one) I am using the below to inset an arrow + an extra space:

    Code:
    #breadCrumbs a:after {
        content: ' >\0000a0';       /*  as escaped unicode. To add extra space after arrow. */
                    }
    Every browser except IE7 renders the escaped unicode as a space. However, IE7 does not recognize the unicode and instead outputs it as the following text:

    Code:
      
    \0000a0
    I can use the below format to write the non-breaking space for IE7, but for all other browsers it renders as text instead:

    Code:
    &#160
    Now, the question is if there is a cross-browser solution to this problem. I tried to make IE7 render the code that it understands with the following in an IE-specific stylesheet, but it ignores it completely (but reads the other styles from the IE-specific stylesheet.) So, what do I do?

    Code:
    *+html #breadCrumbs a:after {
        content: ' >&#160';       /*  as escaped unicode. To add extra space after arrow. */ 
                    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Why not use white-space: nowrap on the list?

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Dear VIPSpethan,

    I'm not sure we're talking about the same. As far as I can read, the white-space:nowrap; collapses whitespace into a single space. What I want to is preserve the extra whitespace after the arrow. I tried to do that with the above formats of the non-breaking space but that turns out to either work in some browsers while displaying the code as text instead of a whitespace in others (and vice versa). So, I'm still looking for an universal solution to preserve the extra space.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Well, then use the CSS margin property to adjust space with pixel precision. You shouldn’t use HTML to achieve a certain look (and a non-breaking space is basically that), that’s what CSS is there for. You can add a margin to the generated content (the :after rule), too.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by CaptainB View Post
    As far as I can read, the white-space:nowrap; collapses whitespace into a single space.
    Yes it does - to retain all the spaces you'd use white-space : pre

    However white-space : nowrap is the solution to your problem of not having a particular space break. Simply wrap the content either side of the space inside a span and apply the style to that.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Margin did the trick - I did not even consider that posibility!
    Thank you both for your answers!


  •  

    Posting Permissions

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