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

Kamotos · Message par **Kamotos** » 28 août 2005, 20:12

Salut!
j'ai un problème d'affichage sous IE,voyez vous meme:
sous firefox

sous internet explorer:

le code html

<!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!

calimo · Message par **calimo** » 28 août 2005, 21:21

C'est un peu court non ? Si on n'a pas le code source complet de la page ou un lien vers elle...

Kamotos · Message par **Kamotos** » 28 août 2005, 21:45

Voilà j'ai mis tout le code,comme tu le vois c'est long,mais si sa peux aider......

Merci d'avance!

calimo · Message par **calimo** » 28 août 2005, 22:23

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

Kamotos · Message par **Kamotos** » 28 août 2005, 22:47

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.

calimo · Message par **calimo** » 29 août 2005, 08:40

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

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)

Kamotos · Message par **Kamotos** » 29 août 2005, 13:01

Vraiment merci sa a marcher sous firefox et IE,vraiment merci beacoup.
tu m'avait conseiller les em,et % eux sont bien?

calimo · Message par **calimo** » 29 août 2005, 13:27

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).

Kamotos · Message par **Kamotos** » 29 août 2005, 13:46

Merci infinement pour ton aide et pour les infos

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

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

Qui est en ligne ?