I have HTML like this (combination of English and Spanish):
<p><em><span class="consolas">In </span><span class="english">English</span><span class="consolas"> and </span><span><strong>Spanish</strong></span></em><em><span class="consolas"> / En </span><span class="english">Inglés</span><span class="consolas"> y </span><span><strong>Español</strong></span></em></p>
<p class="smallfont">Translated by/Traducida por Manuel Caballero (1886)</p>
<hr/>
<section>
<h2 class="smallcaps">PART ONE--The Old Buccaneer / PARTE I--EL VIEJO FILIBUSTERO</h2>
<p class="chapter">CHAPTER/CAPÍTULO 1</p>
<h3>The Old Sea-dog at the Admiral Benbow / EL VIEJO LOBO MARIN EN LA POSADA DEL 'ALMIRANTE BENBOW'</h3>
<p>SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having
asked me to write down the whole particulars about Treasure Island, from
the beginning to the end, keeping nothing back but the bearings of the
island, and that only because there is still treasure not yet lifted, I
take up my pen in the year of grace 17__ and go back to the time when
my father kept the Admiral Benbow inn and the brown old seaman with the
sabre cut first took up his lodging under our roof.</p>
<p class="spanish"><strong>Imposible me ha sido rehusarme á las repetidas instancias que el Caballero Trelawney, el Doctor Livesey y otros muchos señores me han
hecho para que escribiese la historia circunstanciada y completa de la
Isla del Tesoro. Voy, pues, á poner manos á la obra contándolo todo,
desde el <em>alfa</em> hasta el <em>omega</em>, sin dejarme cosa alguna en el tintero, exceptuando la determinación geográfica de la isla, y esto tan solamente
porque tengo por seguro que en ella existe todavía un tesoro no
descubierto. Tomo la pluma en el año de gracia de 17-- y retrocedo hasta
la época en que mi padre tenía aún la posada del "<em>Almirante Benbow</em>," y
hasta el día en que por primera vez llegó á alojarse en ella aquel viejo
marino de tez bronceada y curtida por los elementos, con su grande y
visible cicatriz.</strong></p>
As you can see here in the screamshot:
...the Spanish accented characters are replaced with a default/"I don't know what that is" character. It appears with a different replacement character, but still "broken" in IE (the screamshot is from Chrome).
What must I do to get those accented characters to display as they should/naturally?
UPDATE
I tried the fix that looked easy, adding the "<meta http-equiv="content-type" content="text/html;charset=utf-8" />" line within the "head" section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Treasure Island / La Isla del Tesoro</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
body {
font-family:"Segoe UI", "Palatino Linotype", "Bookman Old Style", "Candara", "Calibri", "Consolas", serif;
font-size: 1.2em;
}
. . .
}</style>
</head>
...but it makes no difference.
UPDATE 2
I still couldn't get the quick tip to work, even with Ctrl+F5, but doing a global search-and-replace of the following (replacing the first in the pair with the second) worked just fine:
á
á
Á
Á
é
é
É
É
í
í
Í
Í
ñ
ñ
Ñ
Ñ
ó
ó
Ó
Ó
ú
ú
Ú
Ú
ü
ü
Ü
Ü
¿
¿
¡
¡
UPDATE 3
BTW, the jsfiddle version of this (which never had a problem with the accented characters) can be seen here
It is important to specify the character set used for your page as some browsers might mess up displaying special characters or characters from different language. Add the below line within your
<head>....</head>I tried your code with and without using the above line and I get proper results after the above line is included.
If their are still some characters which are not being displayed properly then try substituting those characters with their character code. Here is a complete list of character codes for Spanish characters
EDIT: I tried your updated code and it still works fine on Mozilla, Chrome and IE, here is the screeshot of my screen,
Check whether you are exactly writing what you have written in your question
Trying reopening the browser and refresh the page by ctrl+F5