Question : Qu'est qui rend un template non compatible Firefox
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 :
Sous Firefox :
Pourriez vous me donner une piste ?
Merci
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 :
Sous Firefox :
Pourriez vous me donner une piste ?
Si vous avez des améliorations à me faire apporter au template, je suis toute ouie./* 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;
}
Merci
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
Martine
Oui un oubli de l'url : http://www.artgraph-evo2.info/pluxml/
Martine
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.
et voila mon template valide IE et Firefox.
Merci beaucoup à grissouris pour son aide.