Forum-webmaster
Technique - programmation => HTML / CSS / XHTML => Message commencé par: Beni le le 23-03-2008 a 11:42:43

Titre: Petit problème sur IE
Posté par: Beni le le 23-03-2008 a 11:42:43

Bonjour,
je viens de créer mon premier site web pour un projet tutoré et j'aimerais avoir votre avis :
http://mont-dol.fr.tc/. deplus il se trouve que j'ai un petit problème d'affichage sur IE pour ma page d'accueil et pour le menu, si quelqu'un peut m'apporter un petit coup de main je serais preneur.

Voici le php de ma page d'accueil :
<?php

include("interface/entete.php");
include("interface/menu.php");

echo '<div id = "Corps">';

echo '<STYLE type="text/css"><!--
td
{
padding: 8px;
}
</STYLE>';

echo '<table><tbody><tr><td>';
include ("interface/accueil.php");
echo '</td><td rowspan="2" width="205" nowrap="nowrap">';
include ("interface/news.php");
echo '</td></tr><tr><td>';
include ("interface/meteo.php");
echo'</td></tr></table>';

echo '</div>';

include ("interface/pied2page.php");
?>

le php de mon menu :
<?php

echo utf8_encode( '<div id="menu">
<ul class="menu">
<li><a href="index.php">Accueil<span>Page d\'acceuil du site web du Mont-Dol.</span></a></li>
<li><a href="Decouvrir.php">Découvrir<span>Découvrez l\'histoire ainsi que des photos du Mont-Dol.</span></a></li>
<li><a href="Entreprendre.php">Entreprendre<span>Découvrez les Artisans/Entreprises du Mont-Dol.</span></a></li>
<li><a href="vivre.php">Vivre<span>Découvrez les Hebergements possible pour visiter ainsi que les Animations du Mont-Dol.</span></a></li>
<li><a href="Liens.php">Liens<span>Décrouvez d\'autre site web en raport avec le Mont-Dol.</span></a></li>
<li><a href="contact.php">Contact<span>Si vous souhaitez nous contacter.</span></a></li>
</ul>
</div>');

?>
et le css correspondant au menu :
ul
{
margin:0;
width: 843px;
padding: 0;
list-style-type: none;
position: absolute;
}
li
{
float: left;
padding-right: 4px;
width: 136px;
height: 20px;
}
#menu {
width:850px;
}
.menu a
{
text-decoration: none;
display: block;
margin-left: 10px;
color: #fff;
background-color: #009;
font-weight: bold;
text-align: center;
/*-moz-border-radius: 10px; Bord du menu arrondi ne fonctionne qu'avec FireFox*/
}

.menu a:hover
{
color: #009;
background-color: #fff;
border: 1px solid #009;
}
.menu a span
{
display: none;
}
.menu a:hover span
{
display: block;
position: absolute;
top: 35px;
left: 10px;
color: #009;
font-size: 15px;
font-weight: normal;
text-align: left;
border-bottom: 1px dashed #009;
width: 843px;
}
.menu a:focus
{
color: #009;
background-color: #fff;
border: 1px solid #009;
}
.menu a:active
{
color: #009;
background-color: #fff;
border: 1px solid #009;
}


Merci :)

Titre: Re:Petit problème sur IE
Posté par: MarvinLeRouge le le 23-03-2008 a 19:47:48

Salut,

Ton site est en mode quirks. Si tu veux un rendu cohérent cross-browser, je te conseille fortement d'utiliser un mode de rendu strict. Cf notamment l'article d'Openweb à ce sujet.

Titre: Re:Petit problème sur IE
Posté par: Beni le le 23-03-2008 a 21:51:21

Merci pour de ta réponse. Mais j'arrives pas trop à voir ce qui ne va pas, mon doctype est bien en strict et est bien écris, es ce que certaines balises me font passer en mode quirks avec IE? tel que la balise <center>

Titre: Re:Petit problème sur IE
Posté par: MarvinLeRouge le le 24-03-2008 a 11:15:30

- Ton hébergeur met une balise script avant ton doctype pour insérer des frames
- mode strict ne signifie pas nécessairement doctype strict
- la balise center n'existe pas dans ce doctype
- tous les noms de balises s'écrivent en minuscules
- colle systématiquement l'attribut, le =, et la valeur entre guillemets (<div id="Corps"> et non <div id = "Corps">)
- tu as un problème d'encodage : tu indiques utf-8 et ce n'est aparemment pas le cas

Titre: Re:Petit problème sur IE
Posté par: Beni le le 24-03-2008 a 14:48:36

Merci beaucoup pour ta réponse alors
- pour ce qui est de la balise que met xdir, bon elle pose un problème pour la validation mais pour ce qui est du problème que j'avais elle ne change rien puisqu'en local le porblème existe toujours
- j'ai remplacer la balise <center> par un align:"center" à l'intérieur des balises concernée, mais pour l'entête et le menu celle n'est pas prise en compte
- comme tu me l'as conseiller j'ai mis le nom de balise en pinuscule et est collé l'attibut le = et ce qui se trouve entre guillemet
- pour l'encodage de l'actualité c'est réglé mais il ne veut plus accépter l'encodage du menu en utf8 (ça ne m'affiche plus que la banière), alors pour l'instant je le laisse tel qu'il est sans préciser l'encodage
- sinon lorsque j'ai enlever ma balise <style> de ma page d'accueil, le contenu de la page c'est bien affiché, cette balise était elle alors un peu à l'origine du problème?

Voili voilou merci pour tes conseils il ne me reste plus que le menu et la banière qui me pose encore un problème (obliger de laisser la balise <center> pour qu'il me les centres et l'encodage du menu pose problème)

Je vais essayer de palier à ces petits problèmes, en espérant y arriver...

Titre: Re:Petit problème sur IE
Posté par: Beni le le 29-03-2008 a 10:13:52

J'ai toujours un petit problème pour centrer mon menu
dans le reste de mes pages j'utilise align:"center" à l'intérieurdes balises concernées donc pour le moment j'ai laissé le menu à gauche et j'aimerais savoir ce qui m'empêche de le centrer et ce qu'il faudrait faire.

CSS correspondent au menu
ul
{
   margin:0;
   width: 843px;
   padding: 0;
   list-style-type: none;
   position: absolute;
}
li
{
   float: left;
   padding-right: 4px;
   width: 136px;
   height: 20px;
}
#menu {
   width:850px;
}
.menu a
{
   text-decoration: none;
   display: block;
   left :10px;
   color: #fff;
   background-color: #009;
   font-weight: bold;
   text-align: center;   
   /*-moz-border-radius: 10px; Bord du menu arrondi ne fonctionne qu'avec FireFox*/
}

.menu a:hover
{
   color: #009;
   background-color: #fff;
   border: 1px solid #009;
}
.menu a span
{
   display: none;
}
.menu a:hover span
{
   display:block;
   position:absolute;
   top:35px;
   left:5px;
   color:#009;
   font-size:15px;
   font-weight:normal;
   text-align:left;
   border-bottom:1px dashed #009;
   width:843px;
}
.menu a:focus
{
   color: #009;
   background-color: #fff;
   border: 1px solid #009;
}
.menu a:active
{
   color: #009;
   background-color: #fff;
   border: 1px solid #009;
}

le php du menu
<div id="menu">
   <ul class="menu">
      <li><a href="index.php">Accueil<span>Page d'acceuil du site web du Mont-Dol.</span></a></li>
      <li><a href="Decouvrir.php"><?php echo utf8_encode('Découvrir'); ?><span><?php echo utf8_encode('Découvrez');?> l'histoire ainsi que des photos du Mont-Dol.</span></a></li>
      <li><a href="Entreprendre.php">Entreprendre<span><?php echo utf8_encode('Découvrez');?> les Artisans/Entreprises du Mont-Dol.</span></a></li>
      <li><a href="vivre.php">Vivre<span><?php echo utf8_encode('Découvrez');?> les Hebergements possible pour visiter ainsi que les Animations du Mont-Dol.</span></a></li>
      <li><a href="Liens.php">Liens<span><?php echo utf8_encode('Décrouvez');?> d'autre site web en raport avec le Mont-Dol.</span></a></li>
      <li><a href="contact.php">Contact<span>Si vous souhaitez nous contacter.</span></a></li>
   </ul>
</div>

En espérant que quelqu'un puisse résoudre mon petit problème, merci :).


Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.