float IE vs FFX emuler un tableau

**SpaceFrog** · 08/06/2010, 09h13

Je suis encore tombé dans le panneau de l'ordre de floats

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>gfd</title>
 
 
<style type="text/css">
html, body{ width:100%;}
div {
	border: solid 1px;
	height:20px;
	display:block;
	position:relative;
	}
.col1{width:100px;}
.col2{width:250px;}
.col3{width:80px;}
 
 
.l { float:left;}
.br {clear:right;}	
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;}
.rb {border-right: solid 2px;}
.b {border-bottom: solid 2px;}
 
</style>
 
 
</head>
 
<body>
<div class='lb t l col1'>colonne 1</div><div class='t l col2'>colonne 2</div><div class='t col3 br rb'>colonne 3</div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br  rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br  rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br  rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 br rb'></div>
<div class='lb b l col1'></div><div class='b l col2'></div><div class='b col3 br rb'></div>
</body>
</html>

Voir le resultat d'affichage en image jointe ...
Pourquoi ffx inverse-t-il les divs et en conserve-t-il pas dans l'ordre du flux ?

**Bisûnûrs** · 08/06/2010, 09h23

Tu n'as pas de float sur la col3, c'est normal ? Il faudrait lui mettre un float:left et rajouter un clear:both sur col1.

**SpaceFrog** · 08/06/2010, 09h32

Code :

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

1
2
3
4
5
6
7
8
9
 
.l { float:left;}
.br {clear:right;}	
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;
     clear:both;}
.rb {border-right: solid 2px;
     float:right;}
.b {border-bottom: solid 2px;}

???
c'est pire ...

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.l { float:left;}
.br {float:left;
     clear:right;}	
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;
     clear:both;}
.rb {border-right: solid 2px;
     }
.b {border-bottom: solid 2px;}

ok sous FFX mais du coup KO sous IE

**pop_up** · 08/06/2010, 09h45

en ajoutant un overflow:auto sur ta classe col3, ça a l'air de fonctionner (testé sous FF et IE8)

**SpaceFrog** · 08/06/2010, 09h48

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
44
45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>gfd</title>
 
 
<style type="text/css">
html, body{ width:100%;}
div {
	border: solid 1px;
	height:20px;
	display:block;
	}
.col1{width:100px;}
.col2{width:250px;}
.col3{width:80px;}
 
 
.l { float:left;}
.br {clear:right;
     overflow:auto;}	
.t {border-top: solid 2px;	}
.lb {border-left: solid 2px;
     clear:both;}
.rb {border-right: solid 2px;
     }
.b {border-bottom: solid 2px;}
 
</style>
 
 
</head>
 
<body>
<div class='lb t l col1'>colonne 1</div><div class='t l col2'>colonne 2</div><div class='t col3 l br rb'>colonne 3</div>
<div class='l col1 lb'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb l col1'></div><div class='vm l col2'></div><div class='vm col3 l br rb'></div>
<div class='lb b l col1'></div><div class='b l col2'></div><div class='b col3 l br rb'></div>
</body>
</html>

Tu dois etre en mode compatible ... ?
le overflow auto ne change rien chez moi maintenant je suis OK sous FFX mais encore KO sosu IE

**Bisûnûrs** · 08/06/2010, 10h24

On peut connaitre la finalité de ce truc là ? Parce que comme ça, si tu veux régler le problème sur tous les navigateurs, il suffirait que tu englobes l'ensemble de tes div pas un autre qui prend pour largeur la somme ..blabla et qui ferait donc 438px de large.

(au passage, ma méthode fonctionnait sur FF 3.6 et IE8, mais pas IE en mode affichage de compatibilité, donc ce serait bien de préciser sur quelle(s) version(s) de IE tu veux que ça fonctionne)

float IE vs FFX emuler un tableau

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager