[Résolu] Formatage different sous IE et FF

Bonsoir,

Alors que mon texte a un format qui me convient sous Firefox, c'est loin d'être le cas sous IE, puisque ce dernier m'affiche le texte en tout petit petit.

Auriez vous une idée ?

Voici mon code CSS :

body 
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-image: url("../images/graines.gif");
}

/*le conteneur*/
#conteneur
{
position: absolute;
width: 100%;
padding: 0;
margin: 0;
text-align: center;

}

/* La banniere */
#banniere
{	
margin-left: auto;
margin-right: auto;
}
#banniere img /* l'image occupe toute la place de son bloc conteneur */
{
width : 100%;
height: 100%;
}

/*le menu*/
#menu
{
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border: 1px solid black; 
background-color: #aaaaaa; 
text-align: center; 
} 

/*les effets sur le menu et tous ses elements*/
.menu
{
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li 
{
display: inline;
}
.menu a 
{
margin: 0 50px;
color: #000000;
text-decoration: none;
}
.menu a:hover 
{
text-decoration: underline;
color: white;
}

/* Le corps de la page */
#corps
{	
height: auto !important; 
height: 100%; 
min-height: 100%;
margin: 10px;
margin-left: 5px;
margin-right: 5px;
padding-left: 10px;
padding-right: 10px;
height: 300px;
color: #686868;
background-color: white;
text-align: center;
font-size: 1.5em;
font-family: verdana, "Arial Black", "Times New Roman", Times, serif;
border-left: 20px ridge #e9e9e9;
border-right: 20px ridge #e9e9e9;
border-top: 20px ridge #e9e9e9;
border-bottom: 20px ridge #e9e9e9;
}

/* Le pied de page  */
#pied_de_page
{
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 1px;
text-align: center;
font-size: 0.7em;
font-family: verdana, "Arial Black", "Times New Roman", Times, serif;
color: #686868;
background-color: white;
border-left: 3px ridge #e9e9e9;
border-right: 3px ridge #e9e9e9;
border-top: 3px ridge #e9e9e9;
border-bottom: 3px ridge #e9e9e9;
clear: both;
}

/*tous les paragraphes de la page*/
p 
{
margin: 10px 0 10px 0;
}

/*tous les liens de la page*/
a
{
text-decoration: none; /* Les liens ne seront plus soulignés */
color: #9e9e9e; /* Les liens seront en rouge au lieu de bleu */
}

/* Quand le visiteur pointe sur le lien */
a:hover 
{
text-decoration: underline;
color: black;
background-color: #B3B3B3;
}

D'avance merci !


Modifié par Dgidge (27 Nov 2005 - 21:52)

bonsoir,

je n'es pas regardé ton code, mais commence déjà par regarder la configuration de IE en ce qui concerne la taille du texte.

Elle se trouve dans " Affichage --> Taille du texte " et regarde s'il se trouve sur " Moyenne".

Cette erreur arrive souvent en fonction des configuration.

Tiens nous au courant

En passant, tu peux alleger ton code come ci dessous:

padding-left: ............. ;
padding-right: ................;
padding-bottom: ...............;
padding-top: .............;

est equivalent à

padding: (valeur top) (valeur right) (valeur bottom) ( valeur left);


[b]c'est pareil pour margin mais fais bien attention à l'ordre[/b]

Modifié par Philippe (27 Nov 2005 - 21:41)

Merci Philippe !
C'est exactement ça !
La taille du texte dans "affichage" était "plus petite".
J'ai changé pour "moyenne" et là, c'est beaucoup mieux !

Merci merci !!



Edit :

Philippe a écrit :


padding: (valeur top) (valeur right) (valeur bottom) ( valeur left);


c'est pareil pour margin mais fais bien attention à l'ordre

Merci aussi pour cette info, je me demandais pourquoi il y avait parfois 4 valeurs différents pour une meme ligne !
Tout s'explique alors ! Et l'ordre c'est donc le sens des aiguilles d'une montre....
Modifié par Dgidge (27 Nov 2005 - 21:48)

exact

Tu peux donc mettre un [résolu] en editant ton premier post