Bordure sur div

**electro38** · 02/07/2008, 12h56

Bonjour tout le monde,

J'ai un souci au niveau de l'affichage de bordure sous Firefox

Affichage sous IE 7 :

Affichage sous Firefox :

CODE HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
	<body>
		<div id="conteneur">
			<div id="haut"><?php include("./contents/haut.php"); ?></div>
			<div id="conteneurMilieu">
				<div id="menu"><?php include("./contents/menu.php"); ?></div>
				<div id="contenu"><?php include("./actions/switchPages.php"); ?></div>
			</div>
			<div id="bas"><?php include("./contents/bas.php"); ?></div>
		</div>
	</body>

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
body {
background-attachment:fixed;
background-color: #E4E4E4;
background-image:url(../images/tramebleue.jpg);
background-repeat:repeat-x;
}
 
#conteneur{
width: 900px;
margin: auto;
margin-top: 70px;
}
 
#haut{
background-image:url(../images/ban3.png);
border-bottom: solid 1px;
border-color: black;
width: 900px;
height: 196px;
margin-left: auto;
margin-right: auto;
}
 
#conteneurMilieu {
width: 898px;
height: auto;
clear: none;
padding-top: 20px;
border-left: solid 1px;
border-right: solid 1px;
border-color: black;
padding-bottom: 20px;
}
 
#menu{
background-color: #FFF4DE;
width: 160px;
border: solid 1px;
border-color: black;
padding-left: 10px;
padding-right: 10px;
margin-left: 15px;
float: left;
text-align: left;
}
 
#contenu {
background-color: #FFF4DE;
border: solid 1px;
border-color: black;
width: 650px;
margin-right: 15px;
float: right;
padding-left: 10px;
padding-left: 10px;
}
 
#bas{
background-color: #FFFFFF;
border-top: solid 1px;
border-color: black;
width: 900px;
height: 65px;
margin: auto;
position: float;
clear: both;
}

En realité il m'affiche que les bordure du padding-top et padding-bottom de mon conteneurMilieu il ne tiens pas compte de mes div menu et contenu qui sont dans conteneurMilieu

Si quelqu'un a une solution merci d'avance...

**jowsuket** · 02/07/2008, 15h24

Salut,

Déjà la propriété position n'accepte pas la valeur float

Ensuite ce n'est pas un problème de bordures mais bien un problème lié au float.
Sous FireFox les div englobants des éléments avec de float bugent. Tu peu le vérifier en mettant une couleur de fond à #conteneurMilieu.
Essaie en ajoutant
display:table;
dans #conteneurMilieu

J'ai testé cette solution qu'avec FireFox 3 et IE 7

**electro38** · 02/07/2008, 16h16

En effet... Grand merci à toi jowsuket j'espère ne plus me faire avoir maintenant...

**Candygirl** · 02/07/2008, 17h05

Envoyé par jowsuket

Sous FireFox les div englobants des éléments avec de float bugent.

Il ne s'agit absolument pas d'un bug mais d'une interprétation correcte.

Vire le width de #conteneurMilieu et tu verras que IE se comporte alors correctement, soit comme le résultat obtenu sur Firefox

Bordure sur div

CSS

Vue hybride

Discussions similaires

Partager

Partager