[html] Why do symbols like apostrophes and hyphens get replaced with black diamonds on my website?

A website I've made has a few problems... On one of the pages, wherever there's an apostrophe (') or a dash (-), the symbol gets replaced with a weird black diamond with a question mark in the center of it

Here's what I mean
screen

It seems this is happening all over the site wherever these symbols appear. I've never seen this before, can anyone explain it to me?

Suggestions on how to fix it would also be greatly appreciated.

See http://test.rfinvestments.co.za/index.php?c=team for a clear look at the problem.

This question is related to html character-encoding

The answer is


What I really don't understand with this kind of problem is that the html page I ran as a local file displayed perfectly in Chromium browser, but as soon as I uploaded it to my website, it produced this error.

Even stranger, it displayed perfectly in the Vivaldi browser whether displayed from the local or remote file.

Is this something to do with the way Chromium reads the character set? But why only with a remote file?

I fixed the problem by retyping the text in a simple text editor and making sure the single quote mark was the one I used.


If you are editing HTML in Notepad you should use "Save As" and alter the default "Encoding:" selection at the botom of the dialog to UTF-8. you should also include-

_x000D_
_x000D_
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
_x000D_
_x000D_
_x000D_

This un-ambiguously sets the correct character set and informs the browser.


I have the same issue in my asp.net web application. I solved by this link

I just replace ' with &rsquo; text like below and my site in browser show apostrophe without rectangle around as in question ask.

Original text in html page
Click the Edit button to change a field's label, width and type-ahead options

Replace text in html page
Click the Edit button to change a field&rsquo;s label, width and type-ahead options

You need to change your text to 'Plain text' before pasting into the HTML document. This looks like an error I've had before by pasting straight from MS word.

MS word and other rich text editors often place hidden or invalid chars into your code. Try using &mdash; for your dashes, or &rsquo; for apostrophes (etc), to eliminate the need for relying on your char encoding.


I experienced the same problem when I copied a text that has an apostrophe from a Word document to my HTML code.

To resolve the issue, all I did was deleted the particular word in my HTML and typed it directly, including the apostrophe. This action nullified the original copy and paste acton and displayed the newly typed apostrophe correctly


Look at your actual html code and check that the weird symbols are not originating there. This issue came up when I started coding in Notepad++ halfway after coding in Notepad. It seems to me that the older version of Notepad I was using may have used different encoding to Notepad's++ UTF-8 encoding. After I transferred my code from Notepad to Notepad++, the apostrophes got replaced with weird symbols, so I simply had to remove the symbols from my Notepad++ code.