CodingForums.com - View Single Post - Cross-browser: Non-breaking space

CaptainB · 11-06-2012, 08:23 PM

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';       /*&nbsp; 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';       /*&nbsp; as escaped unicode. To add extra space after arrow. */ 
                }

11-06-2012, 08:23 PM	PM User \| #1
CaptainB 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. */ }