Discussion :

[Le_Tolier]

Bonjour,

voila le comme le montre les deux screen shoot, j ai un prob de marge sous IE :



Sous FF pas de prob les blocs sont bien places mais ss IE tout est decale, pour que les blocs en question ( bloc_1 a bloc_3) soient bien places il faut que la margin-right soit a 50px alors que ss ff a 110 ca passe ?:
Code HTML :

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
 
<div id="conteneur">
	<div id="header">
		......
	</div>
	<div id="gauche">
		.......
	</div>
	<div id="droite">
	.......
	</div>
	<div id="centre">
    <div id="centre2"> 
      <p> &nbsp; <img src="images/logo_labo.gif" alt="Logo du Labo" /> </p>
      <br/>
      <br/>
      <p> <img src="images/bandeau_membres.gif" alt="Bandeau" /> </p>
    </div>
		<div id="bloc_1">
			<p class="bandeau"><a href="chercheur_ens.html" class="bandeau">Enseignants <br/>Chercheurs</a></p>
			<br/A>
			<p class="bandeau"><a href="chercheur_cnrs.html" class="bandeau">Chercheurs <br/>CNRS</a></p>			
		</div>
		<div id="bloc_2">
			<p class="bandeau"><a href="it.html" class="bandeau">I.T.</a></p>
		</div>
		<div id="bloc_3">
			<p class="bandeau"><a href="doctorants.html" class="bandeau">Doctorants</a></p>
			<br/>
			<p class="bandeau"><a href="chercheur_associes.html" class="bandeau">Chercheurs <br/>Associés</a></p>
		</div>
	</div>
	<div id="pied">
	.......
	</div>
</div>

Code 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
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
 
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #ffffcc;
}
#header {
height: 20px;
padding-left: 25px;
background-color: #ffffcc;
}
 
#conteneur {
position: absolute;
width: 675px;
left: 50%;
margin-left: -340px;
background-color:#ffffcc;
padding: 0px;
}
 
#centre {
background-color:#ffffcc;
margin-left: 25px;
margin-right: 300px;
height: 530px;
border-top: 1px solid #993333 ;
border-bottom: 1px solid #993333 ;
padding: 0px;
}
 
#centre2 {
margin-left: 20px;
float: left;
background-color:#ffffcc;
width: 105px;
padding: 0px;
}
 
#gauche {
position: absolute;
left:0;
width: 25px;
height: 530px;
background: #ffffcc;
}
 
#droite {
position: absolute;
right:0;
width: 300px;
height: 530px;
border-top: 1px solid #993333 ;
border-bottom: 1px solid #993333 ;
background: #ffffcc;
}
 
#pied {
height: 90px;
background-color: #ffffcc;
font-style: italic;
color: #993333;
}
 
#bloc_1 {
margin-top: 150px;
/*margin-right: 50px; pour IE*/
margin-right: 110px;
width: 100px;
float: right;
}
 
#bloc_2 {
margin-top: 20px;
/*margin-right: 50px; pour IE*/
margin-right: 110px;
width: 100px;
float: right;
}
 
#bloc_3 {
margin-top: 50px;
/*margin-right: 50px; pour IE*/
margin-right: 110px;
width: 100px;
float: right;
}

Si quelqu un a une idee je suis preneur :o

[10-nice]

Perso je me prends plus la tête avec ce genre de détail, j'utilise le hack css sinon je me pends :

Code :

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

1
2
3
sous FF : margin-left:15px;
 
sous IE : margin-left:expression('10px');

Tu mets les deux codes dans ton css, vu que ton navigateur va lire dans l'ordre il faut toujours mettre le hack après le css écrit normallement.

[Le_Tolier]

Merci pour le tuyau mais pourrais tu m en dire un peu plus sur le "hack css" :

[Le_Tolier]

Ca fonctionne mais l'inconvenient c est que la page est plus valide pour le valideur css ...

[10-nice]

Y a des choses qui ne pourront jamais être compatible IE FF et Cie... notamment lorsqu'on place une bordure sur une div ou un quelconque élément, le standard est que la taille de la bordure s'ajoute à l'élément, donc sa taille va augmenter de l'eppaisseur de la bordure, hors IE ne fonctionne aps comme ca, il inclus l'épaisseur de la bordure dans la tialle de l'élément.

Juste un petit exemple pour dire que parfois... on a pas vraiment le choix, et on va pas faire de la mise en page avec des tables :p

[Le_Tolier]

Ok, merci pour tes infos donc tant pis valide xhtml ms pas css c est pas la mort

A bientot