Special symbol no longer appearing consistently h3:after

[operapixie]

Hi there,
So, I've got some footer elements with header code, and up until this morning, the special code (and hard space before it) was showing up just fine. So far as I know, I haven't changed any other CSS that would affect this.

Here.

But now, only in my footer, the double arrow (») that's supposed to appear after the header text is showing up as a big old question mark in a triangle, which I would've thought meant it wasn't loading the correct ISO text (or whatever that's called). BUT, the arrows that are hard-coded in show up just fine in other areas of the page.

I'm a little annoyed by this. Any ideas what may have gone wrong? Here is the CSS code for this particular bit:

div#footer h3.widget-title:after {content:'\000a0»'; font-family:Arial; font-size:37px; color:#222 !important; text-align: left;}


I've tried changing the arrow symbol itself to the &ruquo; corresponding html, but that didn't help one bit. I've also tried changing the apostrophes to quotes. Again, nothing. It's been fine for weeks. Why would it all of a sudden be wonky?

Thanks in advance.

~Laura

[aaronhockey_09]

Change it to this instead.

\00BB

[operapixie]

Ok. Great! Thank you. Now my double-arrows are appearing, but the question-mark in the diamond is still appearing next to it as well.

And this also leaves me asking again, why did it suddenly stop working. And now, what is difference between what I'd had and this 00BB version? How can I look up that sort of thing in the future?

~Laura

[felgall]

content:'\00BB'; should not have the question mark in the diamond next to it - that would be caused by the » character which is not a part of the charactewr set being used by the page - hence the need to encode it as \00BB

[operapixie]

Except, as you can see elsewhere on that SAME page, the double arrows appear just fine. So why in this one area of the page would this be happening...especially when it hasn't happened before?

[VIPStephan]

My Firebug is showing me this:

div#footer h3.widget-title:after {
  color: #222222 !important;
  content: " »�";
  …
}

So, there must be some hidden/invisible character that’s not part of the document’s character encoding (although I’m not seeing any in my code editor). However, the root of the problem lies in the character encoding of the CSS file which is set to “Windows-1252” (you can see that by loading http://dev.yourbusybee.com/RMS/magen...nue/custom.css in your browser and hitting Ctrl/Cmd+I or “page information” or whatever it’s called in the menu). So the quickest and best solution would be to save the CSS file in UTF-8 which can usually be set in the code editor (assuming that you have control over this and the stylesheet isn’t served by the CMS from a script.

[operapixie]

Ah HA! Learned something new! I assumed that since I had "@charset "utf-8";" at the top of the page, that was all that was needed for the encoding. I just discovered how to change the ACTUAL encoding via Coda. Thank you very much! And now my headers are all lovely again :-)

[VIPStephan]

Nice! And Coda even has an option to show all invisible characters (like tabs, white spaces, line breaks, and wrong characters for that matter) with the keyboard shortcut Opt+Cmd+I. Invisible characters that are not in the file’s encoding are marked red then.