Question : Qu'est qui rend un template non compatible Firefox

LaddyLaddy Member
juin 2006 modifié dans Archives
Bonjour
je rencontre une chose etrange, qui ne l'est pas si on connait les astuces du CSS.
J'ai réalisé un template il est valide XHTML 1.0 Strict (pas d'erreur trouvé) et mon CSS est bon aussi pas d'erreur.
Sous IE, tout est nickel par contre sous Firefox tout se chevauche.
Pourquoi ?

Sous IE :
capture011fi.th.jpg

Sous Firefox :
capture024gi.th.jpg

Pourriez vous me donner une piste ?
/* CSS du thème graphique Skyplu(me)xml par Laddy */

html {
font-family : Tahoma, Helvetica, Arial, sans-serif;
text-align: justify;
color : #000;
background : url(img/bk.gif) center #D2E492;}


body {
width : 780px;
font-size: 0.8em;
border: 1px solid #000;
background: url(img/fond_bas.jpg) repeat-y;
font-family: "Tahoma";
margin : auto; padding : 0;}

#global {padding : 30px 0 10px 0;}

/* Styles généraux */
h1 {font-size : 1.6em; color:#666600;}
h2 {font-size : 1.2em;}
h3 {
letter-spacing: 1px;
margin-bottom: 0px;
color: #000;
margin-left: 2px;
padding-top:5px;
}



p {margin : 10px; padding : 3px 10px 3px 0;}
a {color : #666600;}
a:hover {color : #000;}
hr {clear : both; visibility : hidden; margin : 0; padding : 0;}

/* Entete du site */
#top {
height: 245px ;
background: url(img/header02.jpg) no-repeat left top ;
}

/*Menu de l'entete */
ul#menu
{
font-family: "Tahoma";
margin-top: 60px;
margin-left: 36px ;
padding: 0 ;
list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
margin: 0 0 5px 0 ;
padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li a
{
display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
width: 177px ;
line-height: 26px ;
color: #000 ;
text-indent: 40px ; /* On décale le texte de 40px du bord gauche */
text-decoration: none ;
background: url(img/bg_menu.png) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */

}

ul#menu li a:hover
{
background: url(img/bg_menu.png) no-repeat 0 -26px ; /* Et ici on décale l'image du background de 26px vers le haut pour laisser apparaître la 2eme partie de l'image */
}


/*Editorial */
#edito {
background: url(img/fond.jpg) repeat-y;
width: 780px;
font-size: 0.9em;
text-align:justify;
color: #000;
height : 23px;
border-bottom: #C6BB9F solid 3px;
}
.p_edito {
margin-left: 70px;
margin-right: 330px;
text-align: justify;
color: #000;
padding:0px;
font-size: 0.9em;
}

/* Zone de contenu de gauche*/
#content {
float : left;
width : 460px;
margin-left: 10px;
}



/* Conteneur de l'article */
.post {
background-color: #ECE8DF;
padding : 0 0 35px 0px;
width: 550px;}


/* Titre de l'article */
.articletitle {
color : #000;
font-size : 1.5em;
font-weight : bold;
margin : 0; padding : 3px 0 0 15px;}

/* Lien sur le titre de l'article */
.articletitle a{
color : #000;
text-decoration : none;}
.articletitle a:hover{
color : #000;
text-decoration:none;
border-bottom: 1px #FFF dotted;
}

/* Informations de l'article (auteur, date etc...) */
.post-info {
color : #666600;
margin : 2px 5px 15px 15px; padding : 0;}
.post-info a{color : #000;
text-decoration:none;}
.post-info a:hover {color : #000;
text-decoration:none;
border-bottom: 1px #000 dotted;}

/* Conteneur des liens 'page suivante' et 'page précédente' */
#pagination {
margin-top : 10px;
text-align : center;}

/* Menu de droite */
#sidebar {
float : right;
width : 180px;
}

#sidebar div { margin : 5px 10px ;}

/* Titre des menus de la sidebar */
#sidebar h2 {
font-size : 1.1em;
margin : 0; padding : 3px 0 3px 10px;
font-weight : normal;}

/* bloc de liste */
#sidebar ul {
margin : 5px; padding : 3px 0;
font-family: "Tahoma";}

/* élément de liste */
#sidebar li {
list-style: none;
padding: 2px 0 2px 30px;}

/* Liens dans les listes */
#sidebar li a {
color : #000;
text-decoration : none;}
#sidebar li a:hover {color : #000;
text-decoration:none;
border-bottom: 1px #000 dotted;}

/* Pied de page (#footer) */
#basdepage {
text-align : center;
width : 780px;
margin : auto;
background-color: White;
height: 30px;
padding-top : 10px;
font-size : 1.00em;
}
Si vous avez des améliorations à me faire apporter au template, je suis toute ouie.

Merci

Réponses

  • grissourisgrissouris Member
    Repère les padding top et essaye de les enlever pour voir la différence. Et pour mieux voir, mets un border: 1px solid #f00 à tes blocs.
    Martine
  • SkylineSkyline Member
    Ca serai plus simple à dépanner si tu nous présenter l'url de la page car avec juste le code sous les yeux il faudrai avoir un cerveau qui pédale très vite pour trouver les erreurs de rendu.
  • LaddyLaddy Member
    Merci Grissouris pour l'astuce je vais tester.

    Oui un oubli de l'url : http://www.artgraph-evo2.info/pluxml/
  • grissourisgrissouris Member
    ton #edito a une hauteur de 23px, ce qui me parait peu, vu tout le texte qu'il contient.

    Martine
  • LaddyLaddy Member
    juin 2006 modifié
    Merci Grissouris, j'ai augmenté la taille d'edito et effectivement sous FF ça va mieux,un peu trop collé à la barre en dessous, je ne trouve pas comment décoller le paragraphe.

    Par contre tjs pas trouver pour le header, jouer avec les padding et margin ne changent rien.

    et le footer n'est pas au bon endroit
    pfffff.
  • grissourisgrissouris Member
    Laddy, si ça t'intéresse, j'ai arrangé les template, css et images pour avoir le bon design. je t'ai envoyé un MP pour savoir où je peux te faire parvenir les 3 fichiers.
  • LaddyLaddy Member
    Mail reçu, oui tu peux me les faire parvenir . Merci infiniment d'avoir jeter un oeil.
  • LaddyLaddy Member
    J'ai eu la réponse sur le forum alsacreations : il suffit d'ajouter ceci dans ma zone top : overflow: hidden;
    et voila mon template valide IE et Firefox.

    Merci beaucoup à grissouris pour son aide.
Connectez-vous ou Inscrivez-vous pour répondre.