positionnement IE / FFox

**grinder59** · 26/06/2006, 13h03

Bonjour,

j'ai découvert récemment les CSS, et si la façon de séparer les data utiles de la mise en forme me plait bien, je bloque sur les différences d'interprétations IE / FFox au niveau des bordures, des marges et des paddings.

Apparemment, la solution idéale est de simuler les bordures en mettant une image de fond dans un container général. N'y a-t-il pas d'autres solutions moins "magouille" pour faire une bordure sans avoir de différences entre IE ET FFox ?

Autre question : en supposant que l'image de fond générale soit une bonne solution, je voudrais faire un truc tout simple pour préparer la construction de ma page et éviter les dysfonctionnements de marges et bordures entre les navigateurs :
-> 4 rectangles : 1 en haut à gauche, l'autre en haut à droite, le 3 ème en bas à gauche et le dernier en bas à droite.

voici le CSS :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
*{
  margin:0px;
  padding:0px;
}
 
body{
  font-family:arial;
  font-size:12px;
  color:#000000;
  text-align:center;
  background: #fff url(../images/back.jpg);  
}
 
#main{
  width:760px;
  background: #fff url(../images/globack.gif);
}
 
#hautgauche{
  width:380px;
  float:left;
}
 
#hautdroite{
  width:380px;
  float:right;
}
 
#milieu{
  width:380px;
  float:right;
}
 
#basgauche{
  width:380px;
  float:left;
}
 
#basdroite{
  width:380px;
  float:right;
}

pour le HTML suivant :

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
 
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="fr">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
    <title>Bonjour</title>
 
    <link title="test" type="text/css" rel="stylesheet" href="style/fstyle2.css"></link>
 
  </head>
 
  <body>
 
    <div id=main>
      <div id=hautgauche>haut gauche</div>
      <div id=hautdroite>haut droite</div>
 
      <div id=basgauche>bas gauche</div>
      <div id=basdroite>bas droite</div>
    </div>
 
  </body>

Comme j'ai mis un float sur tous les cadres, sous FFox, l'arrière plan ne s'affiche pas. Et si je vire le float du dernier cadre (bas droite) afin d'y mettre un margin-left:380px à la place, tout s'affichera correctement sous Fox, mais j'aurais un décalage vertical sous IE...

Quelqu'un aurait-il une solution ?

Merci de votre aide

**<romain/>** · 26/06/2006, 14h17

tu ne mes que des float left pour les 4. Et quand tu passes sur la "ligne" suivante tu mes : clear:both.
Pour ce qui est des bordure et des paddingsa aprtir de IE6 (il me semble) tout est ok mais si tu veux que ca fonctionne aussi sous els précédentes tu dois bidouiller..

positionnement IE / FFox

HTML

Vue hybride

Discussions similaires

Partager

Partager