Problème compatibilité internet explorer 6 à 9 (block - puces)

Question

Bingbing

23 Jul 2012 à 00:22

Bonsoir à tous,

Voilà, je viens vers vous concernant un problème d'affichage de mon site internet sous IE 6 à 9.

Le code html est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<link rel="shortcut icon" href="favicon.ico" />

<title>licentia licentia</title>
</head>

<body>
<div id="content">
    			<header>
                <div class="div01">               
            	<div class="div01">hic coetuum magnificus magnificus<br />hic coetuum magnificus</div><div id="div02">magnificus</div>
       			</div>
                <a href="#" title="hic coetuum magnificus" id="div03"></a>
                </header>
			
        		<nav>
                    <ul id="menu">
                        <li><a href="#" title="hic coetuum magnificus">hic coetuum magnificus</a></li>
                        <li><a href="#" title="hic coetuum magnificus">hic coetuum magnificus</a></li>
                        <li><a href="#" title="hic coetuum magnificus">hic coetuum magnificus</a></li>
                        <li><a href="#" title="hic coetuum magnificus">hic coetuum magnificus</a></li>
                        <li><a href="#" title="hic coetuum magnificus">hic coetuum magnificus</a></li>
                    </ul>
                    <ul id="div04">                    
                    	<li class="div05"><a href="#" title="hic coetuum magnificus">coetuum</a></li>
                        <li class="div06"><a href="#" title="hic coetuum magnificus">coetuum</a></li>            
                    </ul>
                </nav>
         	 	
         <section>
         <article>
         	<div id="div07"></div>
         	<h1 id="div08">Sed laeditur</h1>
            <p>Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.</p>
            
            <h1>Sed laeditur</h1>
            <p>Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam.</p>
            <p class="div09">Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse</p>
            <div id="div10">ratione vieturo</div>
         	<div id="div11">Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam<br /> gnificus splendor levitate paucorum incondita, ubi nati sunt non</div>
            <div class="div12">
   				<li><a href="#" onclick="window.print(); return false;" title="levitate paucorum">imprimer</a></li>
            </div>
            <div class="div12">
   				<li><a href="#" onclick="window.print(); return false;" title="tamquam indulta">tamquam indulta</a></li>
            </div>
         	</article>
         </section> 
         <footer>
         	
            <ul id="div13">
            		  <li>levitate</li>
                      <li>|</li>
                      <li>reputantium</li>
                      <li>|</li>
                      <li><a href="#" title="reputantium">reputantium</a></li>
                      <li>|</li>
                      <li><a href="#" title="licentia">licentia</a></li>   
            </ul>
         </footer>
            
            
                </div>
            </div>        
</div>
</body>
</html>

et voici le css :

@charset "utf-8";
/* CSS Document */

body
{
    font-family: 'Trebuchet MS', "Times New Roman", Georgia, Arial, sans-serif;
    color: white;
	background-color:#633;
}

#content {
	
	width: 90%;
	margin: auto;
	min-width: 800px;
	min-height: 600px;
}

#div03 {
	
	display: block;
	background-color: red;
	width: 465px;
	height: 102px;
	margin-top: 20px;
	
}

.div01 {
	
	float:right;
	width: 333px;
	height: 70px;
	font-family: Georgia, Arial, sans-serif;
	font-size: 16px;
	color: #f6f6f6;
}

#div02 {
	
	position: absolute;
	width: 110px;
	margin-left: 200px;
	top: 70px;
	font-size: 17px;
	color: #f6f6f6;
}

ul#menu {  
    padding: 0; margin: 0;  
    text-align: center;

}  

ul#menu li { 
 
    display: inline;  
    list-style: none;  
}  

ul#menu a { 
 
    display:inline-block;  
    margin: 0 10px;  
 	width: 196px;
	font-size: 14px;
	margin-top: 35px;
 	line-height: 31px;
 	background: grey repeat-x;
 	color: #d9d9d9;
 	text-decoration: none;
 	text-align: center;
}  

ul#menu li a:hover {
	
 background:green repeat-x;
 color: #fff;
} 




ul#div04 {  
    padding: 0; margin: 0;  
    text-align: center;

}  

ul#div04 li { 
 
    display: inline;  
    list-style: none; 
}  

ul#div04 a { 
 
    display:inline-block; 
    margin: 0 100px;  
	font-size: 17px;
	margin-top: 20px;
 	line-height: 31px;
 	color: #d4d4d4;
 	text-decoration: none;
	font-family: Georgia, Arial, sans-serif;
}  

ul#div04 a:hover {
	
 color: #fff;
} 

li.div05 a {
	
	width: 80px;
	display: inline;
	text-align: center;
	background: blue repeat-x;
}
	
li.div05 a:hover {
	
 	background: red repeat-x;
} 

li.div06 a {
	
	width: 160px;
	display: inline;
	background: blue repeat-x;
	text-align: center;
}
	
li.div06 a:hover {
	
	background: red repeat-x;
} 

article 
{
    width: 55%;
	margin: auto;
	margin-top: 20px;
	border-radius: 15px;
	padding: 10px;
	font-size: 15px;
    background-color: rgb(75,45,54);
	background-color: rgba(57,17,26,0.6);
	border: 1px #959595 solid;

}

#div07 {
	
	display: block;
	background: green;
	width: 400px;
	height: 200px;
	margin: auto;
	border-bottom: 1px #d4d4d4 solid;
	border-top: 1px #d4d4d4 solid;
}

h1#div08 {
	
	margin-top: 50px;
}

.div09 {
	
	text-align: center;
	font-size: 14px;
	font-family: Georgia, "Times New Roman", Verdana, Trebuchet MS, sans-serif;
	font-style:oblique;
	color: #c5abb3;
}

#div10 {
	
	text-align: center;
	color: #cecece;
	font-size: 28px;
	margin-top: 50px;
	font-family:Georgia, Arial, sans-serif;
}

#div11 {
	
	display: inline-block;
	font-family: Georgia, Arial, sans-serif;
	font-size: 16px;
	color: #f6f6f6;
	margin-top: 90px;
	margin-bottom: 15px;
	text-align: left;

}

.div12 {
	
	padding: 0; margin: 0;
	text-align: right;
}

.div12 li {
	
	list-style:circle;
}

.div12 a {
	
	color: #d4d4d4;
	text-decoration:none;
	font-size: 11px;
}

.div12 a:hover {
	
	text-decoration:underline;
}

footer {
	
	width: 55%;
	margin: auto;
	text-align: center;
}

ul#div13 {  
    padding: 0; margin: 0;  
    text-align: left; 

} 

ul#div13 a { 
 
    display:inline-block; 
    margin: 0;
	font-size: 11px;
 	color: #d4d4d4;
 	text-decoration: none;
}  

ul#div13 li { 
 
    display: inline;  
    list-style: none; 
	font-size: 11px; 
	color: #d4d4d4;
}

ul#div13 li a:hover {
	
 color: #fff;
 text-decoration:underline;
} 

h1 {
	
	text-align: center;
	font-family: Georgia, "Times New Roman", Verdana, Trebuchet MS, sans-serif;	
	font-size: 18px;
	font-weight: normal;
	color: #a1a1a1;
	font-weight:normal;
	text-decoration: underline;
	margin-top: 40px;
}

h2 {
	
	font-family: Georgia, "Times New Roman", Verdana, Trebuchet MS, sans-serif;
	font-size: 18px;
	font-weight: normal;
	font-style:oblique;
	color: #c3c3c3;
	margin-top: 40px;
	text-align: justify;
	margin-left: 40px;
}

h3 {
	
	font-family: "Times New Roman", Arial, Georgia, Trebuchet MS, sans-serif;
	font-size: 16px;
	font-weight: normal;
	font-style:oblique;
	color: #ececec;
	margin-top: 40px;
	text-align: center;
}



p {
	
	color: #ececec;
	font-family: "Times New Roman", Arial, Georgia, Trebuchet MS, sans-serif;
	font-size: 15px;
	font-weight:lighter;
	text-align: justify;
	margin-top: 40px;
}

Concernant les problèmes de compatibilité :

Sous IE 9, je rencontre un problème avec mes puces (div12) qui ce placent à gauche de " articles ". puis un problème également avec mon bouton " imprimer " en bas à droite d'article, qui ne lance pas le print (je n'ai pas mis le print dans mon code, mais celui ci ne fonctionne pas)

Pour les autres version d'internet explorer, les puces agissent différement voir se place parfaitement (notamment sous IE 8). Les blocs ne sont plus en place (section) et la div08 vient se coller à la div04 et n'agit plus comme je le désire.

Ce que j'ai déja essayé :

<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

ainsi que :

<link rel="stylesheet" href="style.css" />
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="style_ie.css" />
        <![endif]-->

{
    display: inline;
    zoom: 1;
}

rien de ceci a reglé mes problèmes. (vous n'avez pas la ligne du print, ni celle de ie.css, car je les aient retirés sur les codes postés plus haut, mais j'ai bien entendu testé avec ces déclarations dans mon html)

Si vous avez des idées, et m'aider à comprendre comment pourrais-je fixer ces problèmes, j'en serais ravi.

D'avance, merci.

Cordialement,
Modifié par Bingbing (23 Jul 2012 - 02:24)

Gili

23 Jul 2012 à 09:33

Salut,

La première chose à faire dans ce genre de problème c'est vérifier que ton code est correct grâce au validateur du W3C. Ici tu te rendras compte que les div dont tu parlse (div.div12) sont des div qui contiennent comme enfant direct un li. Hors li ne peut avoir comme parent direct que ul ou ol. Grosse erreur de syntaxe donc, l'erreur à de grande chance de venir de là.

La deuxième chose que je pourrais te proposer c'est d'appliquer un reset css (et le petit dernier créer par Alsa (qui n'est pas vraiment un reset).

En espérant t'avoir fournis quelques pistes Smiley smile

Modifié par Gili (23 Jul 2012 - 09:34)

Bingbing

23 Jul 2012 à 12:02

Bonjour,

Tout d'abord merci pour ton aide.

Je viens effectivement de vérifier mon code, et je suis entreins de corriger les erreurs de celui-ci.

Concernant le reset css que tu m'a fais part .. je suis assez novice en la matière, et même si j'essaye de comprendre un peu tout ca, je n'arrive pas à voir ce que je dois faire avec tout ceci et à quoi celà peu servir.

Je vais essayer de creuser, merci encore.

Cordialement,

Sujet clos

Sémantique web et HTML

Problème compatibilité internet explorer 6 à 9 (block - puces)