Discussion :

[wahou85]

Bonjour,

J'espère que vous pourrez m'éclairer.

Voici mon code :

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
<div id="page">
	<div id="top">
		Ajouter aux favoris | Contact
	</div>
 
	<div id="header">
		<div id="titre">
			// TITRE
		</div>
		<div id="banner">
			// PUB
		</div>
	</div>
...
</div>

Et là 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
#page{
	width: 815px !important;
	width: 808px;
	border: 1px solid #333399;
	border-top:0px;
	padding: 2px;
	padding-top:0px;
	margin-top:-3px; //pour que ce soit collé en haut de page
	background: #ffffff;
}
 
 
#top {
	border: 1px solid #333399;
	padding: 0px;
	background: #3b60b8;
}
 
#header {
	text-align: left;
	border: 0px;
	margin: 0px;
	background-color : #3b60b8; 
}
 
#titre {
	float: left;
	padding: 0px;
	margin: 0px;
	width: 334px;
	height: 62px;
	background : url(../images/title.gif);
	background-repeat:no-repeat;
	background-color : #3b60b8;
}
 
#banner {
	float: right;
	padding: 0px;
	margin: 0px;
	height: 62px;
	background-color : #3b60b8; 
}

Voici ce que j'ai sous IE :


Et voici ce que j'ai sous firefox :


Pour une fois c'est sous IE que ça s'affiche correctement (la pub fait 468px de largeur et le titre est sur 334px, le total faisant bien 802px, la largeur de ma page).

Pourquoi sous firefox y-a-t-il ce pixel d'écart ?

Comment puis-je y remédier ?

Quelqu'un peut-il m'aider ?

Je vous remercie d'avance

[Bisûnûrs]

Je pense que ton soucis est un soucis de bordures.

En effet, si tu définis un élément div de 100px de large avec une bordure de 1px tout autour, sur Firefox il fera 100px + 1px à gauche + 1px à droite = 102px et sur IE ça fera 100px étant donné que la bordure est inclue dans l'élément.

[wahou85]

Merci beaucoup de ta réponse Bisounours. Mais ce serait pas plutôt l'inverse ? En virant les bordures sous firefox le contenu s'élargit.

En tous cas, j'ai orienté mon debuggage vers les bordures comme tu me l'as conseillé.

Je faisais un peu au pif et...

Ca a marché !

J'ai agrandi la div page de 1px et j'ai mis la bordure extérieure à 2px :

Code :

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

1
2
3
	width: 816px !important; //avant : 815px
	width: 808px;
	border: 2px solid #333399; //avant : 1px

C'est pas forcément moche une bordure extérieure à 2px, mais c'est vrai que c'est pas ce que je cherchais au départ.

Je ne mets pas le sujet à résolé, si quelqu'un a une explication au pixel mystère ce serait chouette

Merci