Problème de lecture du CSS sous IE

Marsh Posté le 17-02-2012 à 22:22:17

Bonsoir à tous

J'ai un problème d'affichage de mon site. Sous Chrome/Firefox, aucun problème, mais sous IE8 et antérieur, le navigateur ne lit pas le CSS..

Voici les codes :

Code :

<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<link rel="stylesheet" href="style.css" />
<meta name="author" content="Alizée Rantonnet" />
<meta name="description" content="Accueil Webmarketing, CV en ligne Alizée Rantonnet " />
<meta name="keywords" content="webmarketing, webmarketer, cv webmarketing, cv webmarketer, référenceur, chef de projet web" />
<link rel="icon" type="image/png" href="favicon.png" />
<title>Accueil Webmarketing CV Alizee Rantonnet</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29160444-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre_principal">
<img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" />
<h1>Alizee Rantonnet, CV en ligne</h1>
</div>
<nav>
<ul><li><a href="http://www.alizee-rantonnet.fr">Accueil</a></li>
<li><a href="http://www.alizee-rantonnet.fr/experiences_professionnelles.html">Expériences pro</a></li>
<li><a href="http://www.alizee-rantonnet.fr/formation.html">Formation</a></li>
<li><a href="http://www.alizee-rantonnet.fr/loisirs.html">Loisirs</a></li>
<li><a href="http://www.alizee-rantonnet.fr/contact.php">Contact</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1><img src="images/comment.png" alt="bulle_de_dialogue" class="ico_categorie" />Bienvenue !</h1>
<p>Bonjour, Je m'appelle Alizée Rantonnet, originaire de Lyon. J'ai suivi des études en marketing, communication et informatique afin de pouvoir travailler dans le webmarketing. La vente en ligne est devenue, à mon sens, une part essentielle de notre économie contemporaine.</p>
<div id="sous_titre">Le webmarketing, qu'est ce que c'est ?</div>
<p>C'est le marketing pratiqué sur internet. Comme le marketing traditionnel, il est un moyen d'aide à la vente mais adapté au commerce en ligne, e-commerce. Le webmarketer développe donc des techniques propres à l'environnement internet.</p>
<div id="sous_titre">Quelles techniques utilisent un webmarketer ?</div>
<p>Avant d'entreprendre une action, le webmarketer va auditer les performances du site internet via l’outil Google Analytics. On appelle ce travail amont <strong> la web analytique</strong>. Cela consiste à évaluer l’audience et les comportements des internautes sur un site web. Le webmarketer déclinera ensuite un plan d’action dans lequel il portera plusieurs casquettes :
<p><strong> Webmarketeur / Référenceur </strong> </br>
Le référencement est un domaine incontournable du webmarketing. Il regroupe les techniques visant à améliorer
la visibilité d’un site dans les moteurs de recherches et à attirer davantage de trafic de visiteurs.
On estime que le premier résultat proposé par Google génère à lui seul 36.4% des clics tandis que le second
en génère 12.5% et le troisième 9.5%... On comprend ainsi l’importance du lien entre positionnement d’un
site internet et son nombre de visiteurs. </br>
Le webmarketer peut utiliser des techniques de <strong>référencement naturel </strong>gratuites
(appelées aussi SEO) en optimisant le contenu d'un site internet et en développant des partenariats avec d’autres
sites internet. Il peut aussi piloter des <strong> campagnes de liens payant</strong> (SEM) qui sont gérer avec
Google Adwords et Google Adsence. </p>
<p> <strong> Webmarketer / Community Manager </strong> </br>
Le marketing viral , c’est le bouche à oreille du web 2.0. C’est l’internaute lui-même qui va communiquer pour
l’entreprise via les réseaux sociaux comme Facebook, Twitter et bien d’autres. Si la stratégie fonctionne,
que beaucoup d’individus ont eu accès à l’information et l’on diffusé, on parle alors de buzz.
Le community manager va aussi animer des communautés sur les réseaux sociaux en vu de fidéliser l’internaute et
de déployer l’image de marque de l’entreprise. </p>
<p><strong>Webmarketer / Chef de projet web</strong> </br>
Parfois, c’est la structure même du site qui ne permet pas aux internautes de trouver facilement l’information qu’ils étaient venus chercher. Le webmarketer va donc revoir l'ergonomie du site afin d’assurer une meilleure expérience sur le site aux visiteurs afin qu’ils restent davantage sur le site (meilleur exposition à la publicité) ou qu’ils achètent davantage (site e-commerce). Le webmarketer peut aussi dans une certaine mesure devenir développeur en modifiant les langages informatiques qui structurent le site web comme le HTML, CSS etc.
</p>
<p>Le webmarketer est donc un(e) professionnel(le) polyvalent(e). Si son cœur de métier reste le marketing, il est intimement lié à l’informatique et ses techniques. La veille est une partie intégrante de son travail pour toujours être en force de proposition face aux évolutions permanentes du web. </p>
</article>
<aside>
<p id="photo_identite"><img src="images/CV.JPG" alt="Photo d'identité" /></p>
<p>Suivez-moi sur Twitter pour tout savoir sur l'actualité du e-commerce et du web en général !</p>
<div id="tweets">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 30000,
width: 230,
height: 180,
theme: {
shell: {
background: '#FF8705',
color: '#ffffff'
},
tweets: {
background: '#706B64',
color: '#ffffff',
links: '#eb6207'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('AlizeeRantonnet').start();
</script></div>
<p><a href="http://fr.viadeo.com/profile/002swdgiia4qm0u"><img src="images/viadeo_64x64.png" alt="Viadeo" /><a href="https://twitter.com/intent/user?screen_name=AlizeeRantonnet"><img src="images/twitter.png" alt="Twitter" /><a href="http://www.linkedin.com/pub/aliz%C3%A9e-rantonnet/19/359/b80"><img src="images/linkedin.png" alt="Linkedin" />
<iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=dG1vcVkyVzlrZUJsZlZMNURFOUh0Ymc6MQ" width="210" height="310" frameborder="0" marginheight="0" marginwidth="0">Chargement en cours...</iframe>
</p>
</aside>
</section>
<footer>
<p>Copyright Alizée Rantonnet - Tous droits réservés - <a href="http://www.alizee-rantonnet.fr/mentions_legales.html">Mentions légales </a> - <a href="http://www.alizee-rantonnet.fr/contact.php">Me contacter !</a></p>
</footer>
</div>
</body>
</html>

Le CSS :

Code :

/* Définition des polices personnalisées */
@font-face
{
font-family: 'BallparkWeiner';
src: url('polices/ballpark.eot');
src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
url('polices/ballpark.woff') format('woff'),
url('polices/ballpark.ttf') format('truetype'),
url('polices/ballpark.svg#BallparkWeiner') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face
{
font-family: 'Dayrom';
src: url('polices/dayrom.eot');
src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
url('polices/dayrom.woff') format('woff'),
url('polices/dayrom.ttf') format('truetype'),
url('polices/dayrom.svg#Dayrom') format('svg');
font-weight: normal;
font-style: normal;
}
/* Eléments principaux de la page */
body
{
font-family: 'Trebuchet MS', Arial, sans-serif;
color: #181818;
background-image: url("../images/ondes.jpg" );
}
#bloc_page
{
width: 900px;
margin: auto;
background: #ffffff;
}
section h1, footer h1, nav a
{
font-family: Dayrom, serif;
font-weight: normal;
text-transform: uppercase;
}
/* Header */
header {
padding-bottom: 10px;
background: #ffffff;
}
#titre_principal
{
background: url(/images/Header.jpg)no-repeat;
width: 840px;
height: 135px;
margin: auto;
border-radius: 20px;
padding-bottom: 15px;
}
header h1
{
font-family: 'BallparkWeiner', serif;
font-size: 2.5em;
font-weight: normal;
text-align: right;
vertical-align: bottom;
}
header h2
{
font-family: Dayrom, serif;
font-size: 1.1em;
margin-top: 0px;
font-weight: normal;
}
/* Navigation */
nav {
display: inline-block;
width: 900px;
text-align: center;
background: url(/images/navbar.png)no-repeat;
background-position: -57px;
}
nav ul
{
list-style-type: none;
}
nav li
{
display: inline-block;
margin-right: 15px;
}
nav a {
font-size: 1.5em;
color: #760001;
padding-bottom: 3px;
text-decoration: none;
}
nav a:hover
{
color: white;
}
/* Corps */
aside, section {
padding-top: 10px;
background: #ffffff;
}
article, aside
{
display: inline-block;
vertical-align: top;
text-align: justify;
}
article
{
width: 625px;
margin-right: 15px;
}
.ico_categorie
{
vertical-align: middle;
margin-right: 8px;
margin-left: 10px;
}
article p
{
font-size: 0.9em;
margin-left: 50px;
}
ul {
font-size: 0.9em;
}
#sous_titre
{
margin-left: 50px;
font-weight:bold;
font-family: Trebuchet MS, serif;
}
#sous_titre_expérience
{
margin-left: 50px;
font-weight:bolder;
font-family: Trebuchet MS, serif;
font-variant: small-caps;
background-color : F34F76
}
aside
{
float: left;
position: relative;
width: 235px;
background-color: #706b64;
box-shadow: 0px 2px 5px #1c1a19#;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 0.9em;
text-align: center;
}
#fleche_bulle
{
position: absolute;
top: 100px;
right: -16px;
}
#photo_identite
{
text-align: center;
border-radius : 20px;
}
#photo_identite img
{
border: 1px solid #181818;
}
#tweets .widget-1 h4 {
background-color: #FF8405;
}
aside img
{
margin-right: 5px;
}
#sondage {
color : #706b64;
}
#contact {
margin-left: 10px;
padding-top: 15px;
}
/* Footer */
footer
{
background: url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
background-color: #ffffff;
height: 40px;
padding-top: 15px;
}
footer p, footer ul
{
font-size: 0.8em;
text-align: center;
}
footer h1
{
margin-left: 20px;
font-size: 1.1em;
}
#sondage, #mes_photos, #mes_amis
{
margin-left: 30px;
display: inline-block;
vertical-align: top;
}
#mes_photos
{
width: 25%;
}
#mes_photos img
{
border: 1px solid #181818;
margin-right: 2px;
}

Et enfin le site : www.alizee-rantonnet.fr

De l'aide serait la bienvenue ! D'avance merci

Reply

Marsh Posté le 17-02-2012 à 22:22:17

Reply

Marsh Posté le 20-02-2012 à 00:58:41

Visiblement l'erreur viendrait du fait que IE8 ne tolère pas le html5..

J'ai tenté de rajouter ceci dans le head :



qui marche sur le site d'un ami, mais pas sur le mien... Le problème reste donc toujours la. Si vous avez des idées n'hésitez pas !

Reply

Marsh Posté le 20-02-2012 à 15:39:13

il n'y a pas que ça, sa CSS est pleine d'erreurs,

genre les no-repeat collés à la parenthèse fermante,
les colors sans #

---------------
Blablaté par Harko

Reply

Marsh Posté le 20-06-2012 à 13:24:24

Salut,

C'est normal que ca ne fonctionne pas sous IE8 et inferieur.

Les navigateurs sont trop anciens, et les balises ne sont pas connues, et donc pas interprétées par le navigateur.

Il faut que tu les enregistre au niveau du DOM (http://fr.wikipedia.org/wiki/Document_Object_Model)

Pour cela, place ce bout de code entre les balises head, qui va te permettre de créer les balises au niveau du DOM

Code :

<!--[if lte IE 8]>
<script>
document.createElement("header" );
document.createElement("footer" );
document.createElement("section" );
document.createElement("aside" );
document.createElement("nav" );
document.createElement("article" );
document.createElement("figure" );
</script>
<![endif]-->

Ensuite, il faut donner un style par défaut à ces balises, tu peux faire une feuille de style spéciales pour IE8 et inférieure :

Code :

Dans ta feuille de style tu auras cette règle :

Code :

header, footer, section, hgroup, aside, nav, article, figure, figcaption, time, dialog {display: block;}

Et là c'est bon !

Attention, j'ai vu dans ton css, tu as des

Code :

display:inline-block;

cette règle est mal interprété sous IE7 !

Reply

Problème de lecture du CSS sous IE

Sujets relatifs:

Leave a Replay