Rendu différent entre IE et FF

**PIEPLU** · 05/06/2012, 08h58

Bonjour,

A cause de la bordure, je n'arrive pas à avoir le même rendu sur IE et FF.

Voici ce que j'ai fait pour le moment :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title></title>
<style type="text/css">
body {margin: 0;padding: 0;color:#444;font-family:arial,sans-serif;font-size:13px;background-color:#e8e8e8;text-align:justify;}
#global {position: absolute;left: 50%;width: 1000px;margin-left: -500px;}
#menu {border: 1px solid #333;background-color: #fff;padding:5px;margin:20px 0 20px 0;}
#principal {float:left;min-height:600px;}
.moduleCentre {float:left;width:700px;border: 1px solid #333;background-color: #fff;}
.moduleDroite {float:left;width:300px;border: 1px solid #333;background-color: #fff;}
</style>
</head>
<body>
<div id="global">
  <div id="menu">MENU</div>
  <div id="principal">
    <div class="moduleCentre">CENTRE</div>
    <div class="moduleDroite">DROITE</div>
  </div>
</div>
</body>
</html>

Vous auriez une idée pour réctifier le tir ?

Merci

**Torgar** · 05/06/2012, 12h31

Bonjour,

Quel est le résultat voulu ?

Cas n° 1 :
- Un menu de 1000px de largeur
- Un bloc centré de 700px
- Un bloc à droite de 300px en dessous du bloc centré

Cas n° 2 :
- Un menu de 1000px de largeur
- Un bloc à gauche de 700px
- Un bloc à droite de 300px sur la même ligne

Autre cas ?

Actuellement sur Firefox 12 j'ai :
- Un menu de 1000px de largeur
- Un bloc de 700px à gauche
- Un bloc de 300px à gauche en dessous

Sur IE 9 :
- Un menu de 1000px de largeur
- Un bloc de 700px à gauche
- Un bloc de 300px à droite sur la même ligne

**mcoutant** · 05/06/2012, 13h27

Salut PIEPLU,

Tout d'abord il faut bien comprendre que le width ne définit pas la largeur d'un bloc car du moment ou tu va rajouté un padding ou encore un border la largeur augmente.

Petite explication:
width:300px; padding:-left:20px; = largeur total de 320px.
width:300px; border-left:1px; = largeur total de 301px.

J'en viens donc au faite que:
sur ta div #global 1000px,
sur ta div .centre 700px + bordure de 1px (de chaque coté donc 2px) = 702px
et enfin sur ta div .droite 300px + bordure de 1px = 302px.
Si on additionne .centre + .droite c'est égale à 1004px et ta div qui englobe n'en fait que 1000px donc c'est normal que ton .droite descende.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.moduleCentre {float:left;width:698px;border: 1px solid #333;background-color: #fff;}
.moduleDroite {float:left;width:298px;border: 1px solid #333;background-color: #fff;}

Si jamais tu n'a pas très bien compris je serais ravis de te réexpliquer peut être plus clairement

**NoSmoking** · 05/06/2012, 19h00

Bonjour,
Commence simplement par mettre un DOCTYPE, par exemple <!DOCTYPE html> et tu verras une nette amélioration des rendus inter navigateurs.

Pour le reste suis les conseils donnés ci avant.

Rendu différent entre IE et FF

CSS

Vue hybride

Discussions similaires

Partager

Partager