IE Mozilla différence

loic31 -  
 loic31 -
Bonjour,
Je suis en train de créer mon site et je constate une différence entre internet explorer et Mozilla. Lorsque j'enlève de DOCTYPE, le page ne présente pas d'erreurs sur Mozilla mais présent des anomalies sur internet explorer et lorsque je met un doctype, il se produit l'inverse mais jamais les deux navigateurs affiche la même chose...

merci de m'aider
cordialement
L.
A voir également:

27 réponses

lewis34 Messages postés 2557 Date d'inscription   Statut Membre Dernière intervention   352
 
c'est fort possible que le pb vienne de la, mais margin: 0; padding: 0; me paraisse tellement evident que je suppose que c'est comme ça dans son css.

enfin bon on va pas en faire une affaire d'etat non plus,la raison qui m'a fait intervenir c'est plus qu'en j'ai lu qu'il fallait php pour connaitre le fureteur..

allez je retourne a mes codes, bonne journée à toi
0
loic31
 
Voci mon css :


#en_tete /*bloc d'en-tête*/
{
height: 100px;
border-width: 12px;
padding: 5px;
border-style: double;
border-color: #333333;
margin-top: 40px;
margin-left: 280px;
margin-right:280px;
margin-bottom: 20px;
/*titre*/
text-align:center;
color:#CC9933;
font-size:55px;
font-style:oblique;
font-family: papyrus, RussellSquare, Matura MT Script Capitals, serif;
}

#text1 /*bloc de gauche*/
{
float:left;
width: 160px;
height: 400px;
margin-left: 55px;
margin-top:65px;
padding:3px;
background-image:url(scroll.png);
background-position: center;
background-repeat:no-repeat;
/*rectification du texte intérieur*/

text-align:center;
color: #000000;
font-family: papyrus, RussellSquare, Matura MT Script Capitals, serif;
font-size:24px;
}
/*rectification des liens*/
a:hover
{
text-decoration:none;
color: #3300CC;
}

a
{
text-decoration:none;
color: #000000;
font-size:24px;
}

#image-left
{
width: 200px;
height: 206px;
background-image:url(image1.png);
background-repeat:no-repeat;
margin-left:30px;
float:left;
}

#image-right
{
width: 300px;
height:365px;
background-image:url(barbare1.png);
background-repeat:no-repeat;
float:right;
margin-right: 20px;
}

#image-elfe
{
width:368px;
height:350px;
background-image:url(xy-elfe1.png);
background-repeat:no-repeat;
float: inherit;
margin-top:500px;
}

body
{
background-image: url(background.jpg);
background-attachment:fixed;
background-position: inherit;
background-repeat: repeat-x;
}

#corps
{
/*police*/
font-family: papyrus, RussellSquare, Matura MT Script Capitals, serif;
text-align:center;

/*bloc et bordures*/
width: 900px;
height: auto;
margin-top:-900px;
margin-left:350px;
margin-right:380px;
border-style: double;
padding: 5px;
border-width:12px;
border-color:#333333;
color: #FFFFFF;
font-size:18px;
}



#text2
/*Copyright...*/
{
color:#999999;
text-align: center;
}




/*Menu déroulant*/


div#text1 a
{
margin-left: 45px;
}

/*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/
div#text1
{
width: 200px;
margin-left: 23px;
}

div#text1 ul
{
width: 100px;
}

/*On positionne les elements du menu */
div#text1 ul li
{
position:relative;
list-style: none; /*on enleve les icones de liste */
}

div#text1 ul ul
{
position: absolute;
left: 100px; /*100px correspond au décalage a droite, on décale de la taille du ul de base*/
top: 0;
}

div#text1 li a
{
text-decoration: none; /* plus de soulignement pour les liens */
margin-left:25px;
}


/* On cache tous les sous menu avec la propriété display none */
div#text1 ul ul
{
position: absolute;
left: 60px;
display:none;
}

div#text1 li ul li
{
width:195px;
height: 50px;
padding-top:16px;
background-position: right;
background-repeat:no-repeat;
background-image:url(scroll1.png);
text-align:center;
}

div#text1 li ul li a
{
font-size:18px;
margin-right:15px;
}


/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
div#text1 ul.niveau1 li.sousmenu:hover ul.niveau2,
div#text1 ul.niveau2 li.sousmenu:hover ul.niveau3
{
display:block;
}












J'ai essayé de rajouter { margin: 0; padding: 0; } ça n'a fait que poser d'autre problème.

Si vous voulez que je vous envoie tous mes codes voici mon msn : robinb31@hotmail.fr

Cordialement
0
Anonyme
 
Il faut absolument ajouter tout au début de ta feuille de style CSS :

* {
margin: 0;
padding: 0;
}


Si ca pose d'autres problèmes, alors il va falloir les résoudre... mais de toutes façon, il faut absolument garder le texte ci-dessus. C'est une des mentions obligatoires pour ne pas avoir de soucis de différence entre IE et FF...

Pour ton cas particulier, si ca créé + de soucis, c'est que ton code CSS est bourré d'incohérences... Il faut donc le revoir pas à pas...
0
loic31
 
Pareil,

Voici IE : http://moe.mabul.org/up/moe/2009/08/07/img-131354n84ua.jpg
Et voici FF : http://moe.mabul.org/up/moe/2009/08/07/img-131545och3e.jpg
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
loic31
 
C'est peux être ce passage qu'il n'aime pas xD :

#corps
{
/*police*/
font-family: papyrus, RussellSquare, Matura MT Script Capitals, serif;
text-align:center;

/*bloc et bordures*/
width: 900px;
height: auto;
margin-top:-900px;
margin-left:350px;
margin-right:380px;
border-style: double;
padding: 5px;
border-width:12px;
border-color:#333333;
color: #FFFFFF;
font-size:18px;
}


Avec le - 900px

Je sais pas quoi mettre d'autre pour que ça marche.
0
Anonyme
 
Je n'ai pas le courage de t'aider malheureusement... ton code est bien trop long, je n'ai pas le temps de m'investir dedans...

Ce qui est sur c'est qu'il faut commencer ta feuille de style avec le bout de code que je t'ai donné...

Tu n'as qu'a garder une copie de celle que tu as, de tout effacer et de coller bout par bout en vérifiant a chaque fois le comportement de IE et de FF, tu finira par trouver tout seul le pourquoi du comment...
0
loic31
 
Ok je vais essayer

Merci quand meme
0