Sujet Précédent Sujet Suivant

[HTML] Différence entre iE et FF

Fermé
smalll-princess16 - 22 sept. 2009 à 16:26
 WalibdaH - 2 oct. 2009 à 18:01
Bonjour,

J'ai fait un site web et des différences apparaissent entre IE et FF pour 2 éléments

Avec Firefox: http://imagik.fr/view-rl/128583

Avec IE: http://imagik.fr/view-rl/128582

On peut constater que déjà le menu (en haut à droite, blanc) ne se place pas la même chose dans les 2 navigateurs, avez-vous une solution?

Deuxième problème, le menu violet est en position absolue dans mon CSS et je voulais le placer juste avec des margin, mais vu que iE ne fait pas la même chose que FF, si je mets des marges, tout est décalés et ce n'est pas pareil dans les 2 navigateurs!

Auriez-vous une solution?!

Mon HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MAHF</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="mahf_css.css" rel="stylesheet" type="text/css">


</head>

<body>
<div id="container">
<div id="content">




<div id="header">
<div id="logo"> <img src="logo2.gif"> </div>

<div id="menu">
<ul>
<li class="navig"> Home </li>
<li class="navig"> Search </li>
<li class="navig"> Contact </li>
<li class="navig"> News </li>
<li class="navig"> Français </li>
<li class="navig"> Deutsch </li>
</ul>
</div>
</div>

<div id="menu2">
<ul>
<li class="navig2"> Musée </li>
<li class="navig2"> Expositions temporaires </li>
<li class="navig2"> Médiation culturelle </li>
<li class="navig2"> Collection </li>
<br>
<li class="navig2"> Service </li>
<li class="navig2"> Presse </li>
<li class="navig2"> Infos pratiques </li>
<li class="navig2"> Amis du Musée </li>
<li class="navig2"> Liens </li>
<li class="navig2"> Shop </li>
<br>
<li class="navig2"> Plan Sickinger </li>
</ul>
</div>




<div id="tableau">
<table cellspacing="0" cellpadding="0">

<tr>

<td id="col1" valign="top">Musée d'art et d'histoire <br> Fribourg</td>
<td id="col2" valign="top">
</td>
<td id="col3"></td>
</tr>
<tr>
<td id="col3fusion" colspan="3">

</td>
<td ></td>

<td ></td>


</tr>


</table>


<div id="footer">
<div id="heures">Heures d'ouvertures - Coordonnées - Accès </div>
<div id="web"> > www.fr.ch </div>
</div>
</div>
</div>



</div>

</body>
</html>





Mon CSS:

/* CSS Document */

body {
text-align:center;
background-image: url("background/back.jpg");
background-repeat:repeat;

font-family: Verdana, "Lucida Grande", Lucida, Tahoma, "Trebuchet MS", Arial, Geneva, Helvetica, sans-serif;


}


#container {

background-color:#BCBEC1;
height:600px;
width:800px;
margin:30px auto auto auto;

}

#content {


margin:0px 0 0 0 0;
padding: 10px 0 0 0;
text-align:left;

}
#header {
padding: 0 0 50px 7px;


}
#logo {

margin: 5px 0 0 13px;
width: 100px;



}



#menu {

float:right;
text-align:right;
margin:0;
padding: 0;

}

.navig {
text-decoration:none;
display: inline ;
margin: -10px 0 0 0;
padding: 0 20px 0 0;
color:#ffffff;
font-size: 12px;

}

#menu2 {
position:absolute;
width:225px;
margin: 0px 0 0 0;
padding: 0;

}


.navig2 {

list-style-type:none;
margin: 0 0 2px 0 ;
color:#000000;
background-color:#ACAED6;
font-size: 13px;
font-weight:bold;


}



#navigchoisie {
text-decoration:none;
display: inline ;
margin: -10px 0 0 0;
padding: 0 20px 0 0;
color:#666666;
font-size: 12px;

}



#tableau {
margin: 0px 20px 0 20px;


}

#col1{
background-color:#ACAED6;
height: 60px;
width:260px;
color:#ffffff;

font-weight:bold;
font-size: 15px;

}


#col2{
background-color:#71BDE0;
width:260px;
color:#ffffff;
font-weight:bold;
font-size: 15px;

}

#col3{
background-color:#99BE8B;
width:260px;
}

#col1_2 {
height: 410px;
background-color:#ffffff;

}

#col2_2 {
height: 410px;
background-color:#000000;

}

#col3_2 {
height: 410px;
background-color:#ffffff;

}






#heures
{
padding: 3px 0 0 0;
font-size: 10px;
float:left;
width:400px;
color:#ffffff

}

#web
{
padding: 3px 0 0 0;
font-size: 10px;
float:right;
color:#ffffff;
width:200px;
text-align:right;
}

.diaporama img {
margin: -205px 0 0 0;
position:absolute;
width: 254px
}


#col3fusion {
height: 410px;
background-image: url("fondmahf.jpg");





Je tiens à dire que je ne maitrise vraiment pas les float et les différentes position, c'est peut-etre pour cela que j'ai des problèmes!

Merci pour vos réponses précieuses!
A voir également:

8 réponses

Réponse 1 / 8
smalll-princess16
22 sept. 2009 à 16:49
J'ai calculé, j'ai 16px de différence entre IE et FF pour le menu violet...
1
Réponse 2 / 8
pms
22 sept. 2009 à 16:50
Salut,

Va voir la dessus: http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297

Normalement ça devrait t'aider un peu. =)
0
Réponse 3 / 8
smalll-princess16
22 sept. 2009 à 16:58
Merci j'ai regadé et essayé de mettre des margin différente pour IE 7 et FF mais cela ne foncionne pas...et je n'ai rien trouvé d'autre sur ta page mais je la garde en mémoire, elle me sera surement utile!
0
Réponse 4 / 8
pms
22 sept. 2009 à 17:12
C'est pas normal ça. Vérifie la syntaxe et l'ordre dans lequel tu met les margin.
En utilisant ça, ça marche bien pour mes pages:

margin-bottom: -10px !important ; /* Seulement pour firefox */
_margin-bottom: -26px; /* Seulement poue IE 6 */
0

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

Posez votre question
Réponse 5 / 8
Gregg78 Messages postés 54 Date d'inscription samedi 20 décembre 2008 Statut Membre Dernière intervention 16 mars 2022 4
22 sept. 2009 à 17:14
Un moyen assez simple aussi est de développer plusieurs feuilles de style adaptées au navigateur en question :

<link rel="stylesheet" type="text/css" href="style_fx.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="style_ie6.css" />
<![endif]-->

A plus...

Gregg
0
Réponse 6 / 8
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 48
28 sept. 2009 à 08:42
PMS,

J'ai fait comme tes exemples, cela ne fonctionne pas chez moi...je ne sais pas pourquoi! Est-ce un rapport avec le doctype?
0
Réponse 7 / 8
small-princess16 Messages postés 140 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 1 mars 2012 48
28 sept. 2009 à 09:20
C'est résolu! Je pense que j'avais mal utilisé les hacks CSS!

Merci :)
0
Réponse 8 / 8
WalibdaH
2 oct. 2009 à 18:01
Bonjour
Il faut spécifier des feuilles de styles pour IE7 et IE6 (css_ie6.css | css_ie7.css) et de mettre ce code à l'intérieur de votre page html dans la balisse <head> </head>

<head>
<!--[if lte IE 6]>
<link href="stylesheets/css_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

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

<!--[if IE 7]>
<link href="stylesheets/css_ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
Et je te conseille de télécharger le module firebug pour Firefox qui vous permettre d'inspecter le code html et de faire # tests
Bonne chance
0

Discussions similaires

Que signifie "#FF ..."?
Ocedu47 -
Elie -

7 réponses
Prélèvement Google Ireland Limited
jaffa1961 -
Minette135 -

34 réponses
quel difference entre supprimer et bloquer un contact
marie -
mlleal88 -

2 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Difference entre DDR3 SIMPLE et DDR3L
micksit -
P45M -

1 réponse