le 30/04/2008 à 19:23
Tititi
Chers tous,
J'ai un soucis de compatibilité de mes css entre IE et Firefox. Jusqu'ici, cela semble classique, et j'ai vu au moins une centaine de messages sur différents forums qui parlaient du même sujet.
Sauf que voilà: pour mon site, ce n'est pas IE qui m*rde, mais FF!
J'ai un style <p> tout ce qu'il y a de plus basique, avec une justification (text-align: justify;) et un retrait de première ligne à droite (text-indent: 40px;). Sous IE, aucun problème. Sous FF, pas de retrait et pas de justification.
J'ai passé ma CSS au crible du W3C validator, et il n'y a trouvé aucune erreur.
J'ai lu sur plusieurs forums qu'une solution était de faire deux feuilles de styles différentes, une pour IE et une pour FF, détectées par un script. Je n'ai rien contre cette option, mais en quoi les syntaxes d'une CSS pour IE et pour FF devraient elles différer?
Je n'ai pas de soucis avec la taille de police: c'est un peu plus gros sous IE, mais ça n'a pas grande importance. Je voudrais juste que Firefox applique mes styles!
Merci d'avance.
Ma CSS:
et le site en question: www.exlibrisdatabase.com/athala
J'ai un soucis de compatibilité de mes css entre IE et Firefox. Jusqu'ici, cela semble classique, et j'ai vu au moins une centaine de messages sur différents forums qui parlaient du même sujet.
Sauf que voilà: pour mon site, ce n'est pas IE qui m*rde, mais FF!
J'ai un style <p> tout ce qu'il y a de plus basique, avec une justification (text-align: justify;) et un retrait de première ligne à droite (text-indent: 40px;). Sous IE, aucun problème. Sous FF, pas de retrait et pas de justification.
J'ai passé ma CSS au crible du W3C validator, et il n'y a trouvé aucune erreur.
J'ai lu sur plusieurs forums qu'une solution était de faire deux feuilles de styles différentes, une pour IE et une pour FF, détectées par un script. Je n'ai rien contre cette option, mais en quoi les syntaxes d'une CSS pour IE et pour FF devraient elles différer?
Je n'ai pas de soucis avec la taille de police: c'est un peu plus gros sous IE, mais ça n'a pas grande importance. Je voudrais juste que Firefox applique mes styles!
Merci d'avance.
Ma CSS:
body
{
background-color: #ebddd0;
}
a:active, a:link, a:visited, a:hover { color: #750000; font-weight: bold; text-decoration: none }
h1
{
font-size: 1.7em;
font-family: Garamond, "Bodoni MT", "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
text-align: center;
font-variant: small-caps;
}
h2
{
font-size: 1.2em;
font-family: Garamond, "Bodoni MT", "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
font-variant: small-caps;
text-align: left;
}
h3
{
font-size: 1.1em;
font-family: "Adobe Jenson Pro", Garamond, "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
text-align: left;
text-indent: 33px;
line-height: 0.4em;
}
h4
{
font-size: 1.3em;
font-family: Garamond, "Bodoni MT", "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
text-align: center;
font-variant: small-caps;
}
h5
{
font-family: Garamond, Perpetua, "Bodoni MT", "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
font-size: 1em;
text-align: justify;
font-weight: 400;
}
.g
{
font-weight: 700;
}
h6
{
font-size: 1.1em;
font-family: Garamond, "Bodoni MT", "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
font-variant: small-caps;
}
.grand
{
font-size: 1.2em;
text-align: center;
}
.minuscule
{
font-size: 1em;
font-family: Garamond, "Bodoni MT", "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
font-variant: normal;
}
.petit
{
font-size: 0.7em;
font-variant: normal;
}
.listemenu
{
font-size: 0.8em;
font-family: Garamond, "Bodoni MT", "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
font-variant: small-caps;
}
h7
{
font-family: Garamond, Perpetua, "Bodoni MT", "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
font-size: 0.8em;
text-align: left;
}
h8
{
font-size: 1em;
font-family: Garamond, "Bodoni MT", "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
font-variant: normal;
}
P
{
text-indent: 40px;
font-family: Garamond, Perpetua, "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
font-size: 1em;
text-align: justify;
line-height: 1.9em;
}
.normal
{
text-indent: 40px;
font-family: Garamond, Perpetua, "Book Antiqua", Perpetua, Garamond, "Times New Roman", Times, serif;
font-size: 1em;
text-align: justify;
line-height: 1.9em;
}
.menu
{
font-size: 0.8em;
text-indent: 1px;
}
.petit
{
font-size: 0.9em;
line-height: 1.2em;
}
blockquote
{
text-align: justify;
text-indent: 15px;
}
et le site en question: www.exlibrisdatabase.com/athala
