Problème de lecture du CSS sous IE

Problème de lecture du CSS sous IE - HTML/CSS - Programmation

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 :
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="iso-8859-1" />
  5.         <link rel="stylesheet" href="style.css" />
  6.  <meta name="author" content="Alizée Rantonnet" />
  7.  <!-- Description de la page -->
  8.  <meta name="description" content="Accueil Webmarketing, CV en ligne Alizée Rantonnet  " />
  9.  <!-- Mots-clés de la page -->
  10.  <meta name="keywords" content="webmarketing, webmarketer, cv webmarketing, cv webmarketer, référenceur, chef de projet web" />
  11.         <!-- Icône du site (favicon) -->
  12.  <link rel="icon" type="image/png" href="favicon.png" />
  13. <!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><![endif]-->
  14.  <title>Accueil Webmarketing CV Alizee Rantonnet</title>
  15. <!--script Google Analytics-->
  16.  <script type="text/javascript">
  17.   var _gaq = _gaq || [];
  18.   _gaq.push(['_setAccount', 'UA-29160444-1']);
  19.   _gaq.push(['_trackPageview']);
  20.   (function() {
  21.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  22.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  23.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  24.   })();
  25. </script>
  26.     </head>
  27.     <body>
  28.         <div id="bloc_page">
  29.             <header>
  30.                 <div id="titre_principal">
  31.                     <img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" />
  32.                     <h1>Alizee Rantonnet, CV en ligne</h1>
  33.                     </div>
  34.                
  35. <nav>
  36.           <ul><li><a href="http://www.alizee-rantonnet.fr">Accueil</a></li>
  37.              <li><a href="http://www.alizee-rantonnet.fr/experiences_professionnelles.html">Exp&eacute;riences pro</a></li>
  38.              <li><a href="http://www.alizee-rantonnet.fr/formation.html">Formation</a></li>
  39.              <li><a href="http://www.alizee-rantonnet.fr/loisirs.html">Loisirs</a></li>
  40.              <li><a href="http://www.alizee-rantonnet.fr/contact.php">Contact</a></li>
  41.                     </ul>
  42.                 </nav>
  43.             </header>
  44.                    
  45.             <section>
  46.                 <article>
  47.        <h1><img src="images/comment.png" alt="bulle_de_dialogue" class="ico_categorie" />Bienvenue !</h1>
  48.                     <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>
  49.                     <div id="sous_titre">Le webmarketing, qu'est ce que c'est  ?</div>
  50.     <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>
  51.     <div id="sous_titre">Quelles techniques utilisent un webmarketer ?</div>
  52.     <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 :
  53. <p><strong> Webmarketeur / Référenceur </strong> </br>
  54. Le référencement est un domaine incontournable du webmarketing. Il regroupe les techniques visant à améliorer
  55. la visibilité d’un site dans les moteurs de recherches et à attirer davantage de trafic de visiteurs.
  56. On estime que le premier résultat proposé par Google génère à lui seul 36.4% des clics tandis que le second
  57. en génère 12.5% et le troisième 9.5%... On comprend ainsi l’importance du lien entre positionnement d’un
  58. site internet et son nombre de visiteurs. </br>
  59. Le webmarketer peut utiliser des techniques de <strong>référencement naturel </strong>gratuites
  60. (appelées aussi SEO) en optimisant le contenu d'un site internet et en développant des partenariats avec d’autres
  61. sites internet. Il peut aussi piloter des <strong> campagnes de liens payant</strong> (SEM) qui sont gérer avec
  62. Google Adwords et Google Adsence. </p>
  63. <p> <strong> Webmarketer / Community Manager </strong> </br>
  64. Le marketing viral , c’est le bouche à oreille du web 2.0. C’est l’internaute lui-même qui va communiquer pour
  65. l’entreprise via les réseaux sociaux comme Facebook, Twitter et bien d’autres. Si la stratégie fonctionne,
  66. que beaucoup d’individus ont eu accès à l’information et l’on diffusé, on parle alors de buzz.
  67. Le community manager va aussi animer des communautés sur les réseaux sociaux en vu de fidéliser l’internaute et
  68. de déployer l’image de marque de l’entreprise. </p>
  69. <p><strong>Webmarketer / Chef de projet web</strong> </br>
  70. 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.
  71. </p>
  72. <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>
  73.    </article>
  74.                 <aside>
  75.                     <p id="photo_identite"><img src="images/CV.JPG" alt="Photo d'identité" /></p>
  76.                     <p>Suivez-moi sur Twitter pour tout savoir sur l'actualité du e-commerce et du web en général !</p>
  77.                     <div id="tweets">
  78.     <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
  79. <script>
  80. new TWTR.Widget({
  81.   version: 2,
  82.   type: 'profile',
  83.   rpp: 5,
  84.   interval: 30000,
  85.   width: 230,
  86.   height: 180,
  87.   theme: {
  88.     shell: {
  89.       background: '#FF8705',
  90.       color: '#ffffff'
  91.     },
  92.     tweets: {
  93.       background: '#706B64',
  94.       color: '#ffffff',
  95.       links: '#eb6207'
  96.     }
  97.   },
  98.   features: {
  99.     scrollbar: true,
  100.     loop: false,
  101.     live: false,
  102.     behavior: 'all'
  103.   }
  104. }).render().setUser('AlizeeRantonnet').start();
  105. </script></div>
  106.     <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" />
  107.         <!-- debut du code sondage-->
  108. <iframe src="https://docs.google.com/spreadsheet/embeddedform?formkey=dG1vcVkyVzlrZUJsZlZMNURFOUh0Ymc6MQ" width="210" height="310" frameborder="0" marginheight="0" marginwidth="0">Chargement en cours...</iframe>
  109. <!-- fin du code sondage--></p> 
  110.      </aside>
  111.             </section>
  112.           <footer>
  113.   <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>
  114.             </footer>
  115.         </div>
  116.     </body>
  117. </html>


 
Le CSS :
 

Code :
  1. /* Définition des polices personnalisées */
  2. @font-face
  3. {
  4.     font-family: 'BallparkWeiner';
  5.     src: url('polices/ballpark.eot');
  6.     src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
  7.          url('polices/ballpark.woff') format('woff'),
  8.          url('polices/ballpark.ttf') format('truetype'),
  9.          url('polices/ballpark.svg#BallparkWeiner') format('svg');
  10.     font-weight: normal;
  11.     font-style: normal;
  12. }
  13. @font-face
  14. {
  15.     font-family: 'Dayrom';
  16.     src: url('polices/dayrom.eot');
  17.     src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
  18.          url('polices/dayrom.woff') format('woff'),
  19.          url('polices/dayrom.ttf') format('truetype'),
  20.          url('polices/dayrom.svg#Dayrom') format('svg');
  21.     font-weight: normal;
  22.     font-style: normal;
  23. }
  24. /* Eléments principaux de la page */
  25. body
  26. {
  27.     font-family: 'Trebuchet MS', Arial, sans-serif;
  28.     color: #181818;
  29.     background-image: url("../images/ondes.jpg" );
  30. }
  31. #bloc_page
  32. {
  33.     width: 900px;
  34.     margin: auto;
  35. background: #ffffff;
  36. }
  37. section h1, footer h1, nav a
  38. {
  39.     font-family: Dayrom, serif;
  40.     font-weight: normal;
  41.     text-transform: uppercase;
  42. }
  43. /* Header */
  44. header {
  45. padding-bottom: 10px;
  46. background: #ffffff;
  47. }
  48. #titre_principal
  49. {
  50.     background: url(/images/Header.jpg)no-repeat;
  51. width: 840px;
  52. height: 135px;
  53. margin: auto;
  54. border-radius: 20px;
  55. padding-bottom: 15px;
  56. }
  57. header h1
  58. {
  59.     font-family: 'BallparkWeiner', serif;
  60.     font-size: 2.5em;
  61.     font-weight: normal;
  62. text-align: right;
  63. vertical-align: bottom;
  64. }
  65. header h2
  66. {
  67.     font-family: Dayrom, serif;
  68.     font-size: 1.1em;
  69.     margin-top: 0px;
  70.     font-weight: normal;
  71. }
  72. /* Navigation */
  73.        
  74. nav {
  75. display: inline-block;
  76. width: 900px;
  77. text-align: center;
  78. background: url(/images/navbar.png)no-repeat;
  79. background-position: -57px;
  80. }
  81. nav ul
  82. {
  83.     list-style-type: none;
  84. }
  85. nav li
  86. {
  87.     display: inline-block;
  88.     margin-right: 15px;
  89. }
  90. nav a {
  91. font-size: 1.5em;
  92. color: #760001;
  93. padding-bottom: 3px;
  94. text-decoration: none;
  95. }
  96. nav a:hover
  97. {
  98.     color: white;
  99.    
  100. }
  101. /* Corps */
  102. aside, section {
  103. padding-top: 10px;
  104. background: #ffffff;
  105. }
  106. article, aside
  107. {
  108.    
  109. display: inline-block;
  110.     vertical-align: top;
  111.     text-align: justify;
  112. }
  113. article
  114. {
  115.     width: 625px;
  116.     margin-right: 15px;
  117. }
  118. .ico_categorie
  119. {
  120.     vertical-align: middle;
  121.     margin-right: 8px;
  122. margin-left: 10px;
  123. }
  124. article p
  125. {
  126.     font-size: 0.9em;
  127. margin-left: 50px;
  128. }
  129. ul {
  130. font-size: 0.9em;
  131. }
  132. #sous_titre
  133. {
  134. margin-left: 50px;
  135. font-weight:bold;
  136. font-family: Trebuchet MS, serif;
  137. }
  138. #sous_titre_expérience
  139. {
  140. margin-left: 50px;
  141. font-weight:bolder;
  142. font-family: Trebuchet MS, serif;
  143. font-variant: small-caps;
  144. background-color : F34F76
  145. }
  146. aside
  147. {
  148.     float: left;
  149. position: relative;
  150.     width: 235px;
  151.     background-color: #706b64;
  152.     box-shadow: 0px 2px 5px #1c1a19#;
  153.     border-radius: 5px;
  154.     padding: 10px;
  155.     color: white;
  156.     font-size: 0.9em;
  157. text-align: center;
  158. }
  159. #fleche_bulle
  160. {
  161.     position: absolute;
  162.     top: 100px;
  163.     right: -16px;
  164. }
  165. #photo_identite
  166. {
  167.     text-align: center;
  168. border-radius : 20px;
  169. }
  170. #photo_identite img
  171. {
  172.     border: 1px solid #181818;
  173. }
  174. #tweets .widget-1 h4 {
  175.     background-color: #FF8405;
  176. }
  177. aside img
  178. {
  179.     margin-right: 5px;
  180. }
  181. #sondage {
  182. color : #706b64;
  183. }
  184. #contact {
  185. margin-left: 10px;
  186. padding-top: 15px;
  187. }
  188. /* Footer */
  189. footer
  190. {
  191. background: url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
  192. background-color: #ffffff;
  193. height: 40px;
  194. padding-top: 15px;
  195. }
  196. footer p, footer ul
  197. {
  198.     font-size: 0.8em;
  199. text-align: center;
  200. }
  201. footer h1
  202. {
  203.     margin-left: 20px;
  204. font-size: 1.1em;
  205. }
  206. #sondage, #mes_photos, #mes_amis
  207. {
  208.     margin-left: 30px;
  209. display: inline-block;
  210.     vertical-align: top;
  211. }
  212. #mes_photos
  213. {
  214.     width: 25%;
  215. }
  216. #mes_photos img
  217. {
  218.     border: 1px solid #181818;
  219.     margin-right: 2px;
  220. }


 
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 :
 
 
<!--[if lte IE 8]>
 
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
<![endif]-->
 
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 :
  1. <!--[if lte IE 8]>
  2.         <script>
  3.              document.createElement("header" );
  4.              document.createElement("footer" );
  5.              document.createElement("section" );
  6.              document.createElement("aside" );
  7.              document.createElement("nav" );
  8.              document.createElement("article" );
  9.              document.createElement("figure" );
  10.         </script>
  11.         <![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 :
  1. <!--[if lte IE 8]> <link href="ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->


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

Code :
  1. 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 :
  1. display:inline-block;

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed