[HTML] Différence entre iE et FF
smalll-princess16
-
WalibdaH -
WalibdaH -
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!
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:
- [HTML] Différence entre iE et FF
- Différence entre tcp et udp - Guide
- Difference entre million et milliard - Accueil - Technologies
- Editeur html - Télécharger - HTML
- Difference entre mo et mb - Forum Matériel & Système
- Difference entre mode avion et donnees mobiles - Guide
8 réponses
Salut,
Va voir la dessus: http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297
Normalement ça devrait t'aider un peu. =)
Va voir la dessus: http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297
Normalement ça devrait t'aider un peu. =)
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!
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 */
En utilisant ça, ça marche bien pour mes pages:
margin-bottom: -10px !important ; /* Seulement pour firefox */
_margin-bottom: -26px; /* Seulement poue IE 6 */
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
<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
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?
J'ai fait comme tes exemples, cela ne fonctionne pas chez moi...je ne sais pas pourquoi! Est-ce un rapport avec le doctype?
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
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
