Alignement sous IE8 et Safari5

**boboss123** · 10/04/2013, 17h05

Bonjour,

Voici ma page web simplifiée :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test</title>
 
	<!-- Utilisation du framework css bootstrap : le serveur a l'air de ne pas bien fonctionner aujourd'hui -->
	<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
	<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
 
	<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> -->
	<!-- <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css"> -->
 
 
   	<style type="text/css">
div.dualListBoxInModalWindow{
  width:100%;
  margin:0;
  padding:0;
}
 
div.dualListBoxInModalWindow > div{
  float: left;
  margin: 0;
  padding: 0;
}
 
div.dualListBoxInModalWindow > .dualListBox-left{
  width: 40%;
}
div.dualListBoxInModalWindow > .dualListBox-center{
  width: 20%;
  padding-top: 24px;
}
 
div.dualListBoxInModalWindow > .dualListBox-right{
  width: 40%;
}
 
div.dualListBoxInModalWindow:after {
  display: table;
  line-height: 0;
  content: "";
  clear: both;
}
 
div.dualListBoxInModalWindow select{
  width: 100%;
}
 
div.dualListBoxInModalWindow button{
  display: block;
  margin: 2px auto;
}
 
@media (max-width: 480px){
  div.dualListBoxInModalWindow > div{float: none;}
 
  div.dualListBoxInModalWindow > .dualListBox-left,
  div.dualListBoxInModalWindow > .dualListBox-center,
  div.dualListBoxInModalWindow > .dualListBox-right{
    width: 100%;
    padding-top: 0;
  }
 
  div.dualListBoxInModalWindow button{
    display: inline-block;
    margin: 2px;
  }
 
  div.dualListBoxInModalWindow .icon-arrow-right{background-position: -312px -96px;}
  div.dualListBoxInModalWindow .icon-arrow-left{background-position: -289px -96px;}
}
	</style>	
</head>
 
<body>
	<!-- ################################################################ -->
	<div id="myModalWindow" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalWindowLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalWindowLabel">Title</h3>
		</div>
		<div class="modal-body">
			<div class="dualListBoxInModalWindow">
				<div class="dualListBox-left">
					<label class="control-label">Liste 1</label>
					<div class="controls">
						<select multiple="multiple">
							<option>1</option>
							<option>2</option>
							<option>3</option>
						</select>                                    
					</div>                                
				</div>
 
				<div class="dualListBox-center">
					<button class="btn"><i class="icon-arrow-right"></i></button>
					<button class="btn"><i class="icon-arrow-left"></i></button>                               
				</div>
 
				<div class="dualListBox-right">
					<label class="control-label">Liste 2</label>
					<div class="controls">
						<select multiple="multiple">
							<option>4</option>
							<option>5</option>
							<option>6</option>
						</select>
					</div>
				</div>
			</div>
 
 
 
			<div class="well">
				Bli bli bli bli :
				<div class="btn-toolbar">
					<div class="btn-group dropup">
						<button class="btn">Mon Bouton</button>
 
						<button class="btn dropdown-toggle" data-toggle="dropdown">
							<span class="caret"></span>
						</button>
 
						<ul class="dropdown-menu" data-toggle="buttons-radio">
							<li><a href="#ref1"><i class="icon-ok"></i> Mode 1</a></li>
							<li><a href="#ref2"><i class="icon-ok"></i> Mode 2</a></li>
						</ul>
					</div>
				</div>
			</div>
 
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>                            
		</div>
	</div>
 
 
	<!-- ################################################################ -->
	<div class="container">
 
	</div>	
 
	<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
 
	<script>
	$(document).ready(function() {
		$("#myModalWindow").modal();
	});
	</script>
</body>
</html>

Sous firefox et opéra, ma page s'affiche correctement :

Par contre sous Safari5 et IE8, j'ai un problème de centrage (pas besoin de supporter des versions de IE inférieur à la 8) :

De quoi peut venir le problème ?

Merci d'avance,

**rodolphebrd** · 10/04/2013, 20h26

Bonjour,

Le code que vous postez ne suffit pas (à mon avis) il faudrait au moins une page en ligne pour comparer toutes les feuilles externes.

**boboss123** · 11/04/2013, 09h03

Bonjour,

Il y a normalement tout : juste un copier/coller du fichier devrait suffir (cependant les serveur GitHub ont l'air de ne pas bien fonctionner en ce moment).

Ci-joint, je vous ai remis la page Web avec les frameworks jquery et bootstrap attachés comme ça ça fonctionnera même si les serveurs GitHub sont HS

**rodolphebrd** · 11/04/2013, 10h03

Difficile de tester car je suis sur Saf6 (pourquoi Saf5 d'ailleurs?), J'ai tenté de modifier la position des boutons, sans succès.

Cependant sur Saf6 ça fonctionne très bien.

**boboss123** · 11/04/2013, 11h04

Envoyé par rodolphebrd

Cependant sur Saf6 ça fonctionne très bien.

Parce que je suis sous windows xp et qu'il n'est a priori pas disponible :
http://www.developpez.com/actu/46116...Mountain-Lion/

J'aimerai que l'affichage soi correcte sous :
- IE8 pour les utilisateurs de windows xp (il y en a encore beaucoup)
- Safari5 pour les utilisateurs de windows

**rodolphebrd** · 11/04/2013, 11h28

Je vais tester sur IE8, il faut que je lance mon antiquité.

Alignement sous IE8 et Safari5

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager