28173 sujets

CSS et mise en forme, CSS3

Bon sous IE mais décalage sous Firefox

Bonjour,


J'ai un site web qui s'affiche très bien sous IE mais je voudrais le rendre compatible avec Firefox maintenant.

Or, l'affichage de mes barres verticales ne sont pas bonnes sous Firefox :

- le menu de gauche (fond vert) devrait suivre jusqu'au pied de page pour éviter que le contenu passe dessous

- le contenu de la page (fond jaune au milieu) devrait rester au milieu jusqu'au pied de page

- le menu de droite (fond vert) devrait être de la même taille que le menu de gauche (mais là, je pense que c'est le fait que le contenu se calle sur le bord gauche de la page plutôt que de se caller sur le menu de gauche)



Mon site : http://www.essb.fr
Et voici mon contenu de mon fichier CSS :

#corps {
background:transparent;
border:none;
}
#gauche {
float:left;
width: 13em;
padding:.10em;
font-size:.9em;
background-color:#228B22;
}
#droit {
float:right;
width: 12em;
margin:0;
padding:0.5em;
background-color:#228B22;
}

#milieu {
margin:0 0em 0 0em;
width: 35em;
color:#000000;
background-color:#FFFFCC;
}
#milieu a:link, #milieu a:visited {
color:#000;
text-decoration:none;
font-weight:bold;
}
#milieu a:hover, #milieu a:active {
color:#fff;
background:#393;
}
#milieu a.imp:before {
content:'!';
color:red;
font-size:2em;
padding-right:.2em;
font-weight:bold;
}

#pied {
clear:both;
padding:.5em 0;
text-align:center;
border-top :double .2em #FFFFFF;
}
#pied ul { margin:0; padding:0;list-style-type:none; }
#pied ul li {
display:inline;
padding: 0 .5em 0 .5em;
border-right:simple .3em #FFFFFF;
}
#pied li.nom { font-weight:bold; }
#pied li.dernier { border:none; }
#pied a, a:visited {font-weight:normal;}


Merci d'avance pour vos solutions

Jéjé
Bonjour,

jeje137 a écrit :
J'ai un site web qui s'affiche très bien sous IE mais je voudrais le rendre compatible avec Firefox maintenant.

Il aurait fallu adopter la démarche inverse: travailler selon les standards (plutôt qu'en s'adaptant aux bugs et particularités d'IE) en testant avec un navigateur tel que Firefox ou Opera, puis travailler la compatibilité avec IE.

Pour commencer: ton Doctype est incomplet et fait donc passer les navigateurs en mode Quirks (plutôt qu'en mode Standard). C'est à corriger. Un peu de lecture:
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir
Merci de votre réponse
J'ai regardé le lien et je vais complété mon DocType sur mes pages.

Mais est-ce que le doctype xhml 1.0 serait plus efficace sur mes pages que le html 4.01 pour la compatibilité avec Firefox ?

Merci encore
Jéjé
jeje137 a écrit :
Mais est-ce que le doctype xhml 1.0 serait plus efficace sur mes pages que le html 4.01 pour la compatibilité avec Firefox ?

Non. La seule différence est que la syntaxe est plus stricte en XHTML 1.0 qu'en HTML 4.01. Ça a un avantage pédagogique (on n'apprend pas plusieurs syntaxes possibles, mais une seule syntaxe correcte), mais ça s'arrête là.
D'accord

J'ai changé pour le moment le doctype de mon index (à l'adresse http://www.essb.fr/index2.asp) et constate que les menus sont mieux postionnés (menu horizontal, tableau de classement à gauche). Les 2 navigateurs (IE et FF) sont tous les 2 mals positionnés maintenant !

Par contre, comment je dois procéder pour améliorer le reste ?
Est-ce que vous auriez un lien sur la mise en forme sur les standards pour que je reprenne le code CSS ?

Merci encore
Jéjé
Modifié par jeje137 (30 Jul 2007 - 11:00)
Sujet clos
Aller à