Problème d'affichage sur IE 6 - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Problème d'affichage sur IE 6

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Problème d'affichage sur IE 6 (Lu 1389 fois)

Problème d'affichage sur IE 6
« sur: le 02-11-2010 a 13:40:59 »

Bluely
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 56

Bonjour,

Je viens ici en dernier recours, ne sachant pas quoi faire. J'ai réalisé un site qui s'affiche très bien sur firefox et ie 7 et ie 8, sauf en ie6.
Sur ie 6, toute la structure du site a disparu. Il n'y a que le conteneur (la div qui contient tout) qui est bien en place, centré à l'écran.
J'ai l'impression qu'il n'ya pas d'autre div car tout s'affiche à la suite.
Je n'ai plus de float. Et surtout le contenu avec les images ne sont pas centrés dans la div conteneur et s'affiche sur toute la largeur de l'écran.
Je précise que je n'ai pas utilisé de position relative ou absolue.
Que dois-je faire pour améliorer l'affichage?
Merci pour votre aide.

Rapporter au modérateur

Re:Problème d'affichage sur IE 6
« Répondre #1 sur: le 02-11-2010 a 16:25:58 »

lgm243
Membre récent

Hors-Ligne

Messages: 24

adresse web ?

Rapporter au modérateur

Freelance webmaster /webdesigner
www.lgmcreation.fr

Re:Problème d'affichage sur IE 6
« Répondre #2 sur: le 02-11-2010 a 16:35:08 »

Bluely
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 56

Le site n'est pas encore en ligne. dsl
Mais j'ai vraiment besoin d'aide. En fait il n'y a même plus de mise en page ni de style en ce qui concerne le texte, les images et la structure.

merci

Rapporter au modérateur

Re:Problème d'affichage sur IE 6
« Répondre #3 sur: le 02-11-2010 a 16:37:26 »

lgm243
Membre récent

Hors-Ligne

Messages: 24

peu pas t'aider si tu montres pas le code html et css

Rapporter au modérateur

Freelance webmaster /webdesigner
www.lgmcreation.fr

Re:Problème d'affichage sur IE 6
« Répondre #4 sur: le 02-11-2010 a 16:48:27 »

Bluely
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 56

Alors voici les codes

html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>As.clic</title>
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="css/asclic.css"/>

</head>

<body>
<div id="conteneur">
   <div id="contenu">

      <div id="header">
      <a href="index.html"><img src="images/logo4.png" alt= "logo As.clic" width="336" height="163"/> </a>
      <div id="horaires">
      <p>Disponible de
      <br />9h à 20h
<br />7 jours sur 7</p>

      </div>


      </div>


         <div id="menu">
<ul>
<li class="en_cours"><a href="index.html">Accueil</a></li>
<li><a href="#">Prestations</a>
<ul>
<li><a href="secretariat.html">Secrétariat</a></li>
<li><a href="organisation.html">Organisation</a></li>
</ul>
</li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>


      <div id="presentation">
         <div id="bienvenue"><img src="images/bienvenue.jpg" alt= "Bienvenue" width="380" height="261"/> </div>
         <div id="quoi"><span class="sous-titre"><img src="images/styloDeco.png" alt= "puce" width="20" height="20"/> AS.CLIC c’est quoi ?</span>
<p>Une professionnelle dans le domaine du secrétariat qui vous propose de <span class="texte_couleur">prendre en charge</span> vos tâches administratives, d’<span class="texte_couleur">organiser</span> vos déplacements et <span class="texte_couleur">faciliter</span> votre quotidien de chef d’entreprise.</p><p>Les prestations peuvent se faire ponctuellement ou régulièrement.
Le télétravail est une solution rentable et efficace quand on n’a pas les moyens de rémunérer une secrétaire à mi-temps ou à plein temps.</p>
<br />

</div>
<div class="cleaner"></div>

<div id="pourquoi"><span class="sous-titre"><img src="images/styloDeco.png" alt= "puce" width="20" height="20"/> Pourquoi faire appel à AS.CLIC ?</span>
<p>- Pour sa compétence, son professionnalisme, sa flexibilité, son expérience.
<br />- Pour vous faire gagner du temps et de l’argent.
<br />- Pour vous éviter les coûts liés à l’embauche d’une secrétaire.
<br />- Pour que vous puissiez gérer vos périodes de baisses ou de surcharges d’activités.
<br />- Plus économique que du personnel intérimaire.
<br />- Pour maîtriser vos dépenses.
<br />- Pour ne payer que la prestation commandée.</p>
<span class="macaron"><img src="images/garantie.png" alt="garantie" width="160" height="214SS"/></span>
      </div>

      </div>



      <div id="exemples">
      <span class="sous-titre2">Quelques exemples de missions :</span>
<p class="missions">Secrétariat, mailing, recouvrement de créances, organiser vos déplacements professionnels,
<br />présentation ou diaporama Powerpoint 2007, initiation formation Word 2007…</p>

<h3 class="missions"><strong>N'hésitez pas, profitez d’un service sur mesure pour ne vous occuper que de l’essentiel……
<br />VOTRE ENTREPRISE</strong></h3>

</div>

      <div id="services">
         <div id="secretariat"><a href="secretariat.html"><img src="images/servSecretariat2.png" alt= "Secrétariat" width="350" height="249"/> </a></div>
         <div id="organisation"><a href="organisation.html"><img src="images/servOrganisation2.png" alt= "Organisation" width="350" height="249"/> </a></div>
      </div>

      <div class="cleaner"></div>
      <div id="fond"></div>
      <div id="footer">
      <ul>
      <li><a href="mentions_legales.html">Mentions légales</a> | </li> <li><a href="cgv.html">CGV</a> | </li> <li><a href="contact.php">Contact</a></li> </ul></div>

   </div>
</div>

</body>

</html>

et css

Code:

body{
   margin:0px;
   padding:0px;
   font-family: Helvetica,Verdana, Arial, sans-serif;
   font-size:14px;
   color:#ffffff;
   background: #660033;
   line-height:20px;
   text-align:justify;
}

#conteneur{

margin-left:auto;
margin-right:auto;
width:1000px;
background-color: #caac6e;
background-image: url(../images/fondBois.jpg);
background-repeat: repeat;
behavior: url(../css/iepngfix.htc);

/* conteneur nécesaire pour avoir le dégradé*/

}

#contenu{
width:900px;
margin-left:51px;

}

#header img{
border:none;

}

a{
text-decoration:none;
}

img{
border:0px;
}

#horaires{
width: 200px;
height:195px;
padding-right: 50px;
float:right;
margin-top:-160px;
font-size:18px;
line-height:30px;
background-image:url(../images/postit.png);
background-repeat : no-repeat;
behavior: url(../css/iepngfix.htc);
text-align:center;
color:#330000;
font-weight: semi-bold ;
font-family: Verdana, Arial, Georgia, sans-serif ;
}

#horaires p{
margin-top: 50px;
padding:0px 15px;
}

#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
background-image:url(../images/fondMenu.png);
behavior: url(../css/iepngfix.htc);
font-size:16px;
height:42px;
margin-top:-5px;
margin-bottom:20px;
}

#menu li {
float:left;
margin:auto;
padding:0;
background-color:#660033;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:11px;
}
#menu li a:hover {
background-color:#330000;
}

#menu ul li.en_cours{
background-color:#330000;
}

#menu ul li ul {
display:none;

}

#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;

}
#menu ul li ul {
position:absolute;
}

#presentation{

width:900px;
text-align:justify;

}

a{
color:#ffffff;
text-decoration:underline;
}

#bienvenue{

width: 380px;
float: left;
padding:0px 15px 15px 15px;

}

#quoi{
background-image: url(../images/fondTexte.png);
behavior: url(../css/iepngfix.htc);
width: 440px;
float: right;
padding:20px 15px 15px 15px;
margin-top:10px;
margin-right:20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;

}

.texte_couleur{
color:#660033;

}

#pourquoi{
background-image: url(../images/fondTexte.png);
behavior: url(../css/iepngfix.htc);
padding:20px 15px 15px 15px;

margin:0px 20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;

}

.macaron{

float:right;
margin-top:-185px;
}

#exemples{

padding:40px 20px 30px 20px;
text-align:center;
line-height:20px;
}

#exemples ul{
padding-left:17px;
list-style:none;
margin:0px;
padding:0px;
}

.sous-titre{
font-size:20px;
font-weight:semi-bold;
color:#660033;

}
.sous-titre2{
font-size:20px;
font-weight:semi-bold;
color:#660033;
text-decoration: underline ;
}

.cleaner{
clear:both;
}

.missions{
color:#330000;
}

#services{
height:250px;

}

#secretariat{
float:left;
padding:20px 40px;

}

#organisation{
float:right;
padding:20px 40px;

}
#fond{
background-image: url(../images/fond.png);
behavior: url(../css/iepngfix.htc);
margin-top:-270px;
height:270px;
margin-bottom:-14px;
}

*******Page Contact*******/

#conteneur_formulaire{
width:900px;
}

#colGauche_formulaire{
width:360px;
float:left;
margin: 0px 15px;
}

#intro_formulaire{
font-size:15px;
font-weight:bold;
color:#330000;
padding:0px 20px;
line-height:26px;
text-align:center;

}

#intro_formulaire img{
float:left;
padding-right:20px;
}

#intro_formulaire p{
padding-top:30px;

}

.soulignage{
text-decoration:underline;
}

.infosTitre{
font-weight:bold;
}

#coordonnees{
text-align:center;
line-height:20px;
color:#330000;
background-image: url(../images/fondTexte.png);
padding: 15px ;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-radius: 10px;
behavior: url("css/PIE.htc");
-webkit-box-shadow: #000 0px 0x 15px;
-moz-box-shadow: #000 0px 0px 15px;
box-shadow: #000 0px 0px 15px;

}
#coordonnees a {
color:#330000;
}

#formulaire{
width:450px;
float:right;
background-image: url(../images/fondTexte.png);
margin: 0px 15px;
padding: 15px ;
-moz-border-radius:10px;
-khtml-border-radius:10px;
border-radius: 10px;
behavior: url("css/PIE.htc");
-webkit-box-shadow: #000 0px 0x 15px;
-moz-box-shadow: #000 0px 0px 15px;
box-shadow: #000 0px 0px 15px;

}

fieldset{
border: 4px double #660033;
}

legend{
color:#660033;
font-size:18px;
}

small{
color:#000000;
}

#erreur{
background-color:#660033;
padding-left:15px;
color:white;
}

/*******Page Prestations*******/
#prestations{
width:500px;
background-image: url(../images/fondTexte.png);
padding:15px;
margin:0px 20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
float:right;
}

.fil_Ariane{
margin-top: -20px;
padding-left:20px;
}

.deco_prestations{
margin-left:20px;
padding-top:15px;
margin-bottom:20px;
}

h4{
margin:0;
color:#330000;
text-decoration:underline;
}

h5{
margin:0;
color:#330000;
}

.bt_contact{
background-image: url(../images/bt_contact.png);
background-repeat:no-repeat;
width:250px;
height:238px;
padding:5px 30px;
color:white;
margin:0px 20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
text-align:center;

}

.intitule{
font-family:georgia, serif;
font-weight:bolder;

}

/*******Page Footer*******/
#footer{

width:900px;
height:30px;

background-color:#6d3e3e;
text-align:right;
}

#footer ul {
padding:5px 15px;
}
#footer ul li{
display:inline;
text-decoration:none;
color:#330000;
}

#footer ul li a{
color:#330000;
}

/*******Page Mentions Légales*******/

#mentions, #cgv{
background-image: url(../images/fondTexte.png);
padding:15px;
margin:0px 20px;
-moz-border-radius:10px;
-khtml-border-radius:10px;

}

Merci

Rapporter au modérateur

Re:Problème d'affichage sur IE 6
« Répondre #5 sur: le 03-11-2010 a 12:09:46 »

Pad
Modérateur Global

Hors-Ligne

Sexe: Male

Messages: 1391

tu devrais commencer à abandonner IE6, ça te fera gagner du temps et ça obligera les gens qui ont encore une daube pareil à changer ou mettre à jour leur navigateur

Rapporter au modérateur

Webdéveloppeur / Webdesigner Indépendant
http://vincentdapp.fr/
SIRET 517 691 408 00028

Re:Problème d'affichage sur IE 6
« Répondre #6 sur: le 03-11-2010 a 15:01:07 »

Bluely
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 56

Oui c'est sûr! Mais le problème est que les prestations que proposent ce site ont pour cible les entreprises, et je crois savoir que ce sont surtout les entreprises qui utilisent cet abominable navigateur. J'ai donc besoin que le site soit compatible ie6.
J'ai vraiment besoin d'aide. Svp

Rapporter au modérateur