Page 1 sur 1

Encore un bug d'affichage sous IE[résolu]

Publié : 28 août 2005, 20:12
par Kamotos
Salut!
j'ai un problème d'affichage sous IE,voyez vous meme:
sous firefox
Image
sous internet explorer:
Image
le code html

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head><title>Mignogeo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" type="text/css" rel="stylesheet">


<style type="text/css">
<!--
.Style1 {font-size: 12px}
-->
</style></head>
<body>
<div id="header">
</div>


<div id="menu">
<div id="sous-menu">
<ul>
    <li><a href="#" title="Accueil">Accueil</a></li>
    <li><a href="#" title="Bannieres">Banni&egrave;res</a></li>
    <li><a href="#" title="Liens">Liens</a></li>
    <li><a href="#" title="Livre d'or">Livre d'or</a></li> 
    <li><a href="#" title="Contacts">Contacts</a></li>
</ul>
</div>
<div id="sous-menu">
<ul>
    <li><a href="#" title="Accueil">Accueil</a></li>
    <li><a href="#" title="Bannieres">Banni&egrave;res</a></li>
    <li><a href="#" title="Liens">Liens</a></li>
    <li><a href="#" title="Livre d'or">Livre d'or</a></li> 
    <li><a href="#" title="Contacts">Contacts</a></li>
</ul>
</div>
<div id="sous-menu">
<ul>
    <li><a href="#" title="Accueil">Accueil</a></li>
    <li><a href="#" title="Bannieres">Banni&egrave;res</a></li>
    <li><a href="#" title="Liens">Liens</a></li>
    <li><a href="#" title="Livre d'or">Livre d'or</a></li> 
    <li><a href="#" title="Contacts">Contacts</a></li>
</ul>
</div>

    </div>
	<div id="corps">
 <div class="corps-haut"><img src="images/corps-haut.jpg" alt="Image du haut du cadre"></div>
 <div class="corps-centre"> 
Geckozone : Index du ForumPortailFirefoxThunderbirdMozillaNvu T&eacute;l&eacute;chargementstensionsFirefoxThunderbirdMozillaNvu Forum  Firefox  Thunderbird     Mozilla  Nvu FAQ Liste d'entraide   Rubriques
Suites InternetNavigateurs Le monde de Gecko CourrielleursLes infos du siteLe site Syndication A` propos du projete coin GeckozonePlan du site
Derni&egrave;res actualit&eacute;s du portail  Mozilla 1.7.11 disponible en fran&ccedil;ais (1er/08/2005) Coupure de service programm&eacute;e demain 27 juillet entre 12h00 et 14h00 (26/07/2005) Firefox 1.0.6, Thunderbird 1.0.6 et Mozilla 1.7.10 sont sortis (21/07/2005)erniers articles du portail  Astuces pour les navigateurs Gecko (Firefox, Mozilla, Camino) (6/07/2005) Sauvegarder ses marque-pages (4/07/2005)Guide d’utilisation de Firefox 1.0 - Pour d&eacute;butants, partie 9 3/07/2005)

</div>

 
   <div class="Style1" align="right"><span class="copyright">2005 &copy; www.DjMiGnoGeo.free.fr </span> - Design by Studio-Alpha [alphawars]</div>
 </div>

	
 <div id="footer"></div>


</body></html>

et le CSS:

Code : Tout sélectionner

body
{
 width: 760px;
 margin: auto;
 margin-top: 1%;
 margin-top: 0.5%;
 background-color: #CCCCCC;
 
}

#header
{ 
 background-image: url('images/header.jpg');
 width: 800px;
 height: 150px;
}

#sous-menu
{
 background-image: url('images/menu.jpg');
 
 float: left;
 width: 100%;
 height: 216px;
 margin-bottom: 10px;
}

ul
{
 margin-top: 45px;
 margin-left: 1px;
 font-size: 16px;
}

ul a
{
 color:rgb(141,145,148);
 text-decoration: none;
}

li 
{
 padding-bottom: 10px;
 margin-left: 40px;
}
 
 a:hover
{
 color:rgb(87,89,91);
 text-decoration: underline overline;
}

ul a:hover
{
 color: rgb(87,89,91);
 text-decoration: underline overline;
}



#corps
{
 background-image: url("images/corps-centre.jpg"); 
 background-repeat: repeat-x ;
 width: 571px;
 margin-left: 203px;
 border: 1px solid black;
 position: absolute;
 
  
}


.corps-centre 
{
width: 100%;
background-image: url('images/corps-centre.jpg'); /* Remplcez l'url par la vrai url de votre image */
background-repeat: repeat-x;
}

#menu
{
 float: left;
 width: 192px;
 position: relative;
 clear: left;
}


 



J'ai supprimé les parties qui ne sont pas nessecaires pour alléger un ptit peu.

Merci d'avance! :)

Publié : 28 août 2005, 21:21
par calimo
C'est un peu court non ? Si on n'a pas le code source complet de la page ou un lien vers elle... :roll:

Publié : 28 août 2005, 21:45
par Kamotos
Voilà j'ai mis tout le code,comme tu le vois c'est long,mais si sa peux aider......



Merci d'avance! :D

Publié : 28 août 2005, 22:23
par calimo
Bon, c'est déjà mieux.

La cause du problème ne me saute pas aux yeux à cette heure tardive, mais je peux quand-même dire qu'il y a une incohérence entre le doctype

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
et le type MIME

Code : Tout sélectionner

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Voir cette page pour plus de détails : http://sebastienguillon.com/traduction/ ... ml#summary

Publié : 28 août 2005, 22:47
par Kamotos
Désolé mais je ne vois pas ou est le problème,car vue le tableau dans le lien que tu m'as donné je n'est remarqué aucune incohérence.si tu peux m'expliquer plus. et pour le problème que j'ai posté......... :(


Et merci encore une fois.

Publié : 29 août 2005, 08:40
par calimo
Kamotos a écrit :Désolé mais je ne vois pas ou est le problème,car vue le tableau dans le lien que tu m'as donné je n'est remarqué aucune incohérence.si tu peux m'expliquer plus.
Tu as vu la colonne "XHTML Basic / 1.1" (pour XHTML 1.1). Tu as vu la ligne text/html (le type MIME que tu déclares). Au croisement des deux, tu as :
ON NE DEVRAIT PAS
:wink:
Kamotos a écrit :et pour le problème que j'ai posté......... :(
Pour celui-ci, 10h le soir n'est pas la meilleure heure :)

Pour moi le problème vient du fait que tu combines des position:absolute; et des float...

Voilà quelque chose qui fonctionne :

Code : Tout sélectionner

#corps
{
 background-image: url("images/corps-centre.jpg");
 background-repeat: repeat-x ;
 width: 571px;
 border: 1px solid black;
 margin-left: 203px; 
 position:absolute;
 }
#menu
{
 width: 192px;
 position:absolute;
} 
Juste un conseil : essaye au maximum d'éviter les tailles en px. Elles supportent mal l'agrandissement. Préfère-leur des tailles en em (plus délicates à manier, mais bien meilleures en cas d'agrandissement) :wink:

Publié : 29 août 2005, 13:01
par Kamotos
Vraiment merci sa a marcher sous firefox et IE,vraiment merci beacoup.
tu m'avait conseiller les em,et % eux sont bien?

Publié : 29 août 2005, 13:27
par calimo
Oui ça marche aussi, même si c'est un peu différent.

En fait, ce qu'il faut, c'est que tu puisse agrandir la taille du texte (p.ex en faisant tourner la molette de la souris tout en appuyant sur la touche "Ctrl" du clavier) sans gros dégats (débordements, etc.)

PS : pour le doctype, tu peux repasser au XHTML 1.0 strict HTML Compatible (c'est pour ça que tu n'as pas droit au XHTML 1.1, tu ne peux plus respecter ces règles de compatibilités dans ce mode).

Publié : 29 août 2005, 13:46
par Kamotos
Merci infinement pour ton aide et pour les infos :D