Cross-browser: Non-breaking space

[CaptainB]

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:

#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:

  
\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:

&#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?

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

[VIPStephan]

Why not use white-space: nowrap on the list?

[CaptainB]

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.

[VIPStephan]

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.

[felgall]

Originally Posted by CaptainB

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.

[CaptainB]

Margin did the trick - I did not even consider that posibility!
Thank you both for your answers!