Tom's Guide > Forum > Programmation > [résolu]Problème sous firefox avec ma feuille de style css

[résolu]Problème sous firefox avec ma feuille de style css

Forum Programmation : [résolu]Problème sous firefox avec ma feuille de style css

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Mot :    Pseudo :           
 

Bonjour,

J'ai un problème avec mon graphisme, sous Ie et maxton, tous va bien mais sous firefox, les boutons du menu ne sont pas décalés là ou il devraient l'être...

Voici l'adresse de mon site:
http://www.mondedelanuit.info

et ma feuille css:

Citation :

body {
background-color:#4c4c4c; /*Couleur de fond de la page Web*/
color:#000000; /*Couleur du texte*/
font-family:Verdana, Arial, Helvetica, sans-serif; /*Polices d’écriture*/
font-size:11px; /*Taille d’écriture*/
padding:0; /*Pour que la page n’ai aucune marge*/
margin:0; /*Pour que la page n’ai aucune marge*/
}

#contenu {
width:800px; /*Largeur du design*/
margin:0 auto 0 -400px; /*Marges du design ( la 4eme marge représente la moitié de la largeur du div*/
position:absolute;
top:25px; /*25px entre le coin supérieur de l’écran et le design*/
left:50%; /*50% de marge ( cela centrera le design )*/
background-image:url('./images/background.jpg'); /*Motif si il y’en a un*/
background-repeat:repeat; /*Duplication du motif sur les axes x et y*/
border:0px solid #000000; /* Bordure encadrant le design */
}

#menu_gauche {
background-image:url('./image/menu_fond.jpg') ;
background-repeat:repeat-y ;
width:218px;
float:left;
margin-top:13px;
margin-left:7px !important;
margin-left:3px;
}

#fondtexte {
background-image:url('./image/texte_fond.jpg') ;
background-repeat:repeat-y ;
width :555px ;
float :right ;
margin-top :11px ;
margin-right: 14px !important;
margin-right:7px;
}

#texte {
width :459px ;
float :right ;
margin-right: 56px !important;
margin-right: 28px;
}

#fondtexte p {
padding :10px ;
margin-left:40px !important;
margin-left:40px;
}

#footer {
background-image:url('./image/footer.jpg');
width:776px;
height:27px;
float:left;
margin-top:3px;
margin-left:6px !important;
margin-left:3px;
}

p.copyright {
margin-top:6px;
text-align:center;
color:#000066;
font-size:9px;
font-family:Verdana;
}

p.copyright a {
color:#666666;
text-decoration:underline;
font-weight:bold; /* texte en gras */
}

p.copyright a:hover {
color:#FFFFFF;
}

/* Reglages personnels : */
ul , li { margin:0; padding:0; list-style-type:none; text-align:center; } /* Pas de marges automatique dans les listes, ni de puces */

a { color:#5E0000; text-decoration:none; }/*Paramètres des liens*/
a:hover { color:#64A2EC; }/*Paramètres des liens quand le pointeur est sur ceux-ci*/

h1 { text-align:center; margin:0; font-family: Monotype Corsiva; }/*Le texte des balises h1 est centré ( car il est souvent utilisé pour les titres), et cette balise n’a plus de marge automatique */
p { margin:0; padding:0; }/*Pas de marges automatiques sur les <p> */

div.clear { clear:both; }/*Nous verrons ceci un peu plus tard. */
img { display:block ; border:0; }/*Aucune bordure sur les <img>*/



Merci d'avance si vous pouvez m'aider, je ne vois pas du tout d'où vient le problème et je commence à desespérer :-(

Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.

déjà des erreurs:
ne met pas div#contenu mais plutôt #contenu (et pareil pour les autres)
Ensuite, il y a des espaces entre tes <li> et tes images, ainsi qu'entre tes images et tes </li>

Et ton menu gauche, ne le met pas en class mais en id (définition avec #menu_gauche et appel avec <div id="menu_gauche"> )

Répondre à crazycat@idn

Merci beaucoup!!!!

J'ai corrigé ces erreurs, mais le problème persiste...
J'ai mis la nouvelle feuille a la place de l'ancienne, et mes fichiers corigés en ligne.

J'ai essayé de mettre du texte dans le menu et celui ci est bien centré :-?
Donc le script marche, mais pas pour mes images :-(

Répondre à Fizba

faut juste changer le padding

ul , li {
margin:0px;
padding-left:24px;
list-style-type:none;
text-align:center;
}

et ton menu est centré.

Répondre à Noxk

Bonjour,

J'ai essayé la modif et ca marche sous ff!!...mais plus sous IE :-? :-?

J'ai tenté de résoudre le probléme en modifiant cette petite partie du css:

Citation :

#menu_gauche {
background-image:url('./image/menu_fond.jpg') ;
background-repeat:repeat-y ;
width:218px;
float:left;
margin-top:13px;
margin-left:7px !important;
margin-left:3px;
voice-family: "\"}\"";
voice-family: inherit;
width: 120px; }
.ie5debug {
}



Et ca marche!! Tout est bien à sa place!!
Mais... Il me manque le bord de mon menu sur la droite avec Firefox...

J'ai mis la nouvelle version en ligne sur le lien du début.
J'ai aussi un probléme pour espacer les boutons du menu sous firefox :-(

Encore merci pour vos reponses, je dois plus être trop loin de la soluce...

Répondre à Fizba

Bon, premier problème réglé:

J'avais un css qui marché pour IE et un qui marché pour firefox, j'ai donc fais 2 css différents pour chaque navigateur, c'est pas trop la classe mais ca marche :-D :-D .

Pour que ca fonctionne, voila le code à rajouter entre les <head> dans la pages html:

Citation :

<link rel="stylesheet" type="text/css" href="./style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="./IEstyle.css" />
<!endif-->



Avec IEstyle et style les 2 fichiers css.


Et second probléme d'espacement des boutons du menu resolu avec... des <br>...


Si quelqu'un a une solution plus classe, je suis preneur!


Merci a tous!

Répondre à Fizba
Tom's Guide > Forum > Programmation > [résolu]Problème sous firefox avec ma feuille de style css
Aller à :

Il y a 2809 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens