5

I am using the following css to set the text for a button that will remove a tag:

button.close:after {
  content: '×';
}

This results in a good looking button like this:

nice looking close button

But randomly the string × gets replaced by the string Ã-. I first thought this could be related to encoding but if indeed it was the problem I think this wouldn't happen randomly. It happens at a low frequency and at this very moment it is not happening (will update the question with another print screen as soon as it happens again).

This css code comes from a .less file that I am compiling and then minifying and then concatenating.

How can I make sure the string × will be shown all the time?

Renato Gama
  • 16,431
  • 12
  • 58
  • 92
  • 2
    What does “randomly” mean? After you reload? After you change the file? Sporadically while the site is loaded, without user interaction? Either way, it probably *is* related to encoding. – Konrad Rudolph Sep 18 '15 at 13:51
  • 1
    Try adding `@charset "utf-8";` in Your css – Bogdan Kuštan Sep 18 '15 at 13:57
  • Yes, it happens sporadically. Very weird! For example; I just had this problem then I recompiled all the css files and hit CMD+R on chrome. The problem didn't go away. Then I hit it more 3 times and it worked again! It has not bored me a lot since this seldom happens. The problem is that it happens mostly when I am demonstrating the software to someone & it is **embarassing**. – Renato Gama Sep 18 '15 at 14:00

3 Answers3

6

The multiplication character has the UTF-8 sequence 0xC3 0x97. When that is decoded using the Windows-1252 character set instead it becomes × (A tilde, em dash).

So, the problem is indeed that the CSS is decoded as Windows-1252 instead of as UTF-8. The CSS is normally decoded the same way as the HTML document, so it seems that there is no character set specification netier in the page nor in the HTTP header. That forces the browser to guess what the encoding is. As the browser is making the guess using any available data (and the algorithm differs between browsers) the guess can be different depending on how much of the page and related files are in the cache already.

Specify the encoding for the page in the HTML head:

<meta charset="utf-8">

You can also specify the encoding specifically for the CSS file by adding this at the top, but that should only be needed when it differs from the page encoding:

@charset "utf-8";
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • thanks for your answer. I just noticed I have this tag on my html ``. Aren't they equivalent? – Renato Gama Sep 18 '15 at 14:18
  • @renatoargh: They should be. It might be in the wrong place or overridden by a header content-type. There are some views worth looking at here: http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type – Guffa Sep 18 '15 at 14:29
3

Try using 'ISO' value for that sign - \00d7

Check here: https://css-tricks.com/snippets/html/glyphs/

shershen
  • 9,875
  • 11
  • 39
  • 60
0

If you see those characters you probably just didn’t specify the character encoding properly. Because those characters are the result when an UTF-8 multi-byte string is interpreted with a single-byte encoding like ISO 8859-1 or Windows-1252.

Use utf8_decode() to convert them to normal ISO-8859-1 characters. http://php.net/manual/en/function.utf8-decode.php

or add

<meta charset="UTF-8">

or use header("Content-Type: text/html; charset=utf-8"); on top of your PHP scripts.

Darren Willows
  • 2,053
  • 14
  • 21