FireFox problème de bordure

**Royd938** · 31/01/2006, 09h52

Bonjour à tous,

voilà, j'ai un petit problème sous Firefox et pour une fois, je crois que c'est FF qui interprète mal le 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
 
#cadre_principal {
 
	position: relative;
	width: 750px;
	height: 100%;
	left: 50%;
	margin-left: -376px;
	border-left: solid 1px black;
	border-right: solid 1px black;
}
 
#cadre_photo_titre {
 
	width: 750px;
	height: 100px;
	margin-top: 75px;
	background-color: #666666;
	border-top: solid 1px black;
 
}

et voici ma page:

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
 
<html>
 
<head>
 
	<link rel="stylesheet" href="./style/main.css" />
 
</head>
 
<body>
 
	<div id="cadre_principal">
 
		<div id="cadre_photo_titre">
 
		</div>
 
	</div>
 
</body>
 
</html>

quelqu'un pourrait-il me dire pourquoi les border du cadre_principal disparaissent au dessus du cadre_photo_titre ??? Comprends pas et ce problème ne se pose pas sou IE. Commence à en avoir marre de ces problèmes d'incompatibilité !!!

**dhjapan** · 31/01/2006, 10h49

raaah !!

oui pour Firefox : le border fait partie de la boite ...

alors que pour IE le border c'est quelque chose qui s'ajoute autour de la boite.

pour tester :

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
#cadre_principal {
 
   position: relative;
   width: 10px;
   height: 100%;
   border: solid 10px red;
}
 
#cadre_photo_titre {
 
   width: 10px;
   height: 100px;
   margin-top: 75px;
   background-color: #CECECE;
   border: solid 10px blue;
 
}

**Johnbob** · 31/01/2006, 11h12

Envoyé par dhjapan

oui pour Firefox : le border fait partie de la boite ...

alors que pour IE le border c'est quelque chose qui s'ajoute autour de la boite.

Si le problème vient bien de là, alors il suffit de spécifier le bon doctype et toutes les bordures / margins / paddings auront le même comportement sous FF et IE.