Incompatibilité IE / Firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Incompatibilité IE / Firefox

Kechi

Bonjour !

Depuis près de 3 ans, je fais toutes les structures de mes site avec des tableaux en html.
Suites à de nombreuses critiques d'amis, je décidé de passer à une mise en page en css.

Inutile de dire que c'est beaucoup plus propre et lisible.
Content de mon résultats sous Mozilla, je décide de vérifier sous IE. et forcément bug !

La mise en page est simple:
- une image en header
- une zone aussi large que le header pour faire défiler des citations
- une menu à gauche
- et la page a coté du menu

Tout s'affiche parfaitement sous Firefox, mais sous IE, la "page" se place sous le menu (met bien décallé comme il faut).

Et, je ne sais pas d'où vient le problème.

Actuellement, je travail sur deux pages:

Index.html:
<html>
<head>
<title>Test de design</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<center>
<div class="all">

<div class="header"></div>

<div class="quotes">
mmmmmmmmmmmmmmmhhhhhhhhhhhhhhhhhhhh
</div>

<div class="menu">
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
bla<br>bla<br>
</div>

<div class="page">
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>
bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br>

</div>

</div>
</center>
</body>

</html>

Et le style.css associé:
body {
font-family:Verdana, Arial;
color:white;
background-color:black;
font-size: 12px;
text-decoration:none;
}

.all {
margin-top: 5px;
margin-bottom: 5px;
width:720px;
background-color:black;
}

.header {
background-image: url('Head.jpg');
width: 720px;
height: 300px;
border: #ff0000 5px solid;
}

.quotes {
margin-top: 4px;
width: 720px;
border: #ff0000 5px solid;
}

.menu {
margin-top: 4px;
float: left;
width: 190px;
border: #ff0000 5px solid;
}

.page {
margin-top: 4px;
margin-left: 204px;
width: 516px;
border: #ff0000 5px solid;
}

Pourriez-vous m'aider ?

Merci !

Publicité

xtof_83

Freeride Spirit

sur le forum, il est bon de poster son code entre balise [code]

Ensuite, met un doctype au début de ton code, regarde sur le net ce que ça signifie...

Aprés on voit

Et dans le css met au début:

Code :

* {
margin:0;
padding:0;
}

Kechi

Re bonjour,

Excuse moi pour l'erreur de la balise :S

Alors, j'ai effectué les modifications que tu as demandé, j'ai donc ainsi:

Index.html

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test de design</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<div class="all">
<div class="header"></div>
<div class="quotes"></div>
<div class="menu"></div>
<div class="page"></div>
</div>
</center>
</body>
</html>

Style.css

Code :

* {
margin:0;
padding:0;
}
body {
font-family:Verdana, Arial;
color:white;
background-color:black;
font-size: 12px;
text-decoration:none;
}
.all {
margin-top: 5px;
margin-bottom: 5px;
width:720px;
background-color:black;
}
.header {
background-image: url('Head.jpg');
width: 720px;
height: 300px;
border: #ff0000 5px solid;
}
.quotes {
margin-top: 4px;
width: 720px;
border: #ff0000 5px solid;
}
.menu {
margin-top: 4px;
float: left;
width: 190px;
border: #ff0000 5px solid;
}
.page {
margin-top: 4px;
margin-left: 204px;
width: 516px;
border: #ff0000 5px solid;
}

Dinc, mon problème persiste malgré tout.

Merci ^^

Message édité par Kechi le 04-07-2006 à 15:26:01

bob_eponge

j'ai trouvé la solution.

1) Il faut virer le tag <center> de ta page web
2) il faut virer le width:720px de la classe .all

xtof_83

Freeride Spirit

<center> ça existe plus comme balise, c'est deprecated

Met un

Code :

margin:0 auto;
width:valeur;

Pour centrer le contenu, aprés ça, je pourrais maybe décidé à regarder ton code

Kechi

Alors, merci pour vos réponses.

Bob_eponge, ta solution me convient moyennement, dans le sens où, je veux garder le design centré.
Chose, que xtof semble me faire conserver.

Par contre, j'ai toujours mon problème avec ta correction xtof. Le cadre "page" se met bien à sa place, mais reste placé sous le menu.

Donc, voilà où je suis niveau code:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test de design</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="all">
<div class="header"></div>
<div class="quotes"></div>
<div class="menu"></div>
<div class="page"></div>
</div>
</body>
</html>

Code :

* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial;
color: white;
background-color: black;
font-size: 12px;
text-decoration: none;
}
.all {
margin-top: 5px;
margin-bottom: 5px;
background-color: #000000;
color: white;
margin: 0 auto;
width: 720px;
}
.header {
background-image: url('Head.jpg');
width: 720px;
height: 300px;
border: #ff0000 5px solid;
}
.quotes {
margin-top: 4px;
width: 720px;
border: #ff0000 5px solid;
}
.menu {
margin-top: 4px;
float: left;
width: 190px;
border: #ff0000 5px solid;
}
.page {
margin-top: 4px;
margin-left: 204px;
width: 516px;
border: #ff0000 5px solid;
}

xtof_83

Freeride Spirit

met un clear:left; dans .page

Kechi

Ca me donne un résultat encore plus bizzare O_o

Il me décalle le cadre en hauteur sous Mozilla et rien ne change sous IE O_O

Yoyo@

Salut,

Voici la solution que je te propose:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test de design</title>
<style type="text/css">
body { margin: 0; padding: 0; background-color:black; color: #fff;}
.all { width: 720px; margin: 0 auto;}
.header { border: #ff0000 5px solid; }
.quotes { margin-top: 4px; border: #ff0000 5px solid; }
.menu { float: left; border: #ff0000 5px solid; width: 190px; margin-top: 4px; }
.page { margin-left: 204px; border: #ff0000 5px solid; margin-top: 4px; width: 506px; }
* html .page { margin-left: 201px; }
</style>
</head>
<body>
<div class="all">
<div class="header">aaa</div>
<div class="quotes">aaa</div>
<div class="menu">aaa</div>
<div class="page">aaa</div>
</div>
</body>
</html>

Je pense qu'elle te conviendra.
A toi de ocmpléter avec ton contenu, et également tes backgrounds...

Tu verras que coder avec du CSS, c'est certes plus léger, mieux, etc... mais surtout beaucp plus prise de tête qu'avec les tables. Ca demande énormément de maîtrise, et plus de temps...
Pour ma part, j'a commencé par la mise en page avec CSS, en évitant dès le début d'utiliser des tables, mais je pense que je vais chercher à apprendre à le faire avec des tables... Ca peut sauver la vie quand on est bloqués à cause de telle ou tell incompatibilité avec des browsers...

Message édité par Yoyo@ le 05-07-2006 à 10:51:16

Yoyo@

Ah oui, j'ai testé avec:
Firefox
IE 6.0
Opéra 9

FORUM HardWare.fr

Programmation

HTML/CSS

Incompatibilité IE / Firefox

Sujets relatifs
onChange fonctionne sous Firefox mais pas IE...	Probleme href avec firefox
Probleme CSS avec Firefox	CSS et IE: Marges sous les images // Firefox: chargement en 2 temps
Erreur d'exécution '13': incompatibilité de type	Afichage ok avec IE5 mais pas avec Firefox - Pourquoi ???
decalage entre IE et Firefox...	[HTML/CSS] Firefox et images non dispo
Vidéos qui démarrent toujours automatiquement dans firefox !	paragraphes + float differents sous IE et Firefox
Plus de sujets relatifs à : Incompatibilité IE / Firefox

Page générée en 0.094 secondes