Problème d'adaptation ie9

Fermé
nano0742 Messages postés 79 Date d'inscription samedi 4 novembre 2006 Statut Membre Dernière intervention 1 avril 2011 - 1 avril 2011 à 14:01
mpmp93 Messages postés 6651 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 - 13 avril 2011 à 13:27
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 79 Date d'inscription samedi 4 novembre 2006 Statut Membre Dernière intervention 1 avril 2011
1 avril 2011 à 20:09
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 6651 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 331
13 avril 2011 à 13:27
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