Problème d'adaptation ie9

nano0742 Messages postés 80 Statut Membre -  
mpmp93 Messages postés 7217 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour à tous !

Alors voilà, je viens de finir le site web de ma cliente, valide html et css, compatible avec ie7 et 8.
Sauf qu'elle m'a contacté car elle est passée sous ie9. Et boum, une erreur :
www.oec-translation.com
Mes titres ne s'affichent pas, sauf si on clique sur l'icone "problèmes de compatibilité".

Donc je voulais savoir si vous avez déjà eu des cas similaires, si vous avez quelques pistes?

Merci d'avance

un exemple d'un bout de code concerné par ce phénomène :

<aside>
          <div class="aside-tail">
            <div class="aside-top">
              <div class="aside-bot">
                <div class="inner">
                  <div class="wrapper">
                    <article class="block-1">
                      <div class="indent"> <strong>Des besoins</strong>
                        <p>Vous avez besoin d'interprètes, de traducteurs ou de matériel pour mener à bien la traduction de votre conférence ou de vos documents...</p>
                      </div>
                    </article>
                    <article class="block-2">
                      <div class="indent-1"> <b>Aux solutions</b>
                        <p>Nous sommes là pour vous ! Notre équipe d'interprètes et de traducteurs sera heureuse de réaliser votre projet.</p>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a href="contact.php" id="aside-button">Contact</a>
	 </aside>


aside {
	position: relative;
	width: 100%;
	padding: 0 0 43px 0;
}

	aside .aside-tail {
		background: url(../images/aside-tail.jpg) repeat-y 0% 0%;
	}

	aside .aside-top {
		background: url(../images/aside-top.jpg) no-repeat 50% 0%;
	}
	
	aside .aside-bot {
		background: url(../images/aside-bot.jpg) no-repeat 50% 100%;
		width: 100%;
	}
	
	aside .inner {
		padding: 39px 0 58px 0;
	}
	
	aside .block-1 {
		width: 480px;
	}
	
		aside .indent {
			padding: 0 36px 0 40px;
			text-align: right;
		}
	
	aside .block-2 {
		width: 480px;
	}
	
		aside .indent-1 {
			padding: 0 36px 0 36px;
		}
	
	aside strong {
		display: block;
		padding: 0 15px 12px 0;
		line-height: 1.3em;
		font-size: 4em;
		font-weight: 500;
		color: #fff;
	}
	
	aside b {
		display: block;
		padding: 0 0 12px 0;
		line-height: 1.3em;
		font-size: 4em;
		font-weight: 500;
		color: #fff;
	}
	
	aside p {
		padding: 0 0 20px 0;
		line-height: 20px;
		font-size: 1.25em;
		color: #fff;
	}

#aside-button {
	background: url(../images/aside-button.png) no-repeat 0% 0%;
	display: block;
	width: 175px;
	height: 83px;
	overflow: hidden;
	line-height: 74px;
	font-size: 3em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	position: absolute;
	left: 393px;
	bottom: 26px;
}

	#aside-button:hover {
		color: #fc817a;
	}



2 réponses

nano0742 Messages postés 80 Statut Membre
 
Le problème venait de cufon, le script permettant de créer de jolies polices.
Il faut le mettre à jour pour ie9, tout simplement.
Solution bête, mais des heures de réflexion !

Sujet résolu !
0
mpmp93 Messages postés 7217 Date d'inscription   Statut Membre Dernière intervention   1 341
 
Bonjour.

je vois que vous programmez en HTML5. Bravo.

mais je vois aussi une prolifération de DIV qui s'emboitent.

De plus vous avez plusieurs fois l'élément ARTICLE.

Je conseille de n'utiliser ARTICLE qu'une seule fois et de mettre des SECTION pour hiérarchiser les différents découpages de ARTICLE:

<article>
<header>....en-tête...</header>
<section id='bloc1'>.....</section>
.....
<footer>...en-pied...</header>
</article>

Fusionnez les styles imbriqués qui se succèdent dans vos DIVs en une seule classe. Voir le contenu de votre css. Votre code ne doit pas seulement être 'compatible' IE9, il doit être compatible tous navigateurs.

A+
0