2 pièce(s) jointe(s)
Problème de bordures et d'espace selon FF ou IE7
Bonsoir tout le monde,
Tout d'abord merci à tous les contributeurs de ce forum.
J'ai souvent trouve les solutions de mes problèmes CSS dans ce forum.
Mais là je cale !
J'ai reproduis mon problème dans un script que je vous soumet :
Code:
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Javascript :: CSS :: Avec multiClass, permuter deux classes sur un événement onclick</title>
<style type="text/css">
<!--
body {
font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
color: #333;
margin: 0;
padding: 0;
}
#container {
position: relative;
width: 640px;
border: thin solid #a9a9a9;
margin: 3em auto;
text-align: left;
}
ul #ulcontainer {
list-style-position: outside;
padding-right: 5px !important;
padding-bottom: 5px !important;
}
#bloc_haut_gauche {
border-bottom: thin solid #a9a9a9;
text-align: left;
float: left;
width: 50%
}
#bloc_haut_droit {
border-bottom: thin solid #a9a9a9;
text-align: right;
float: right;
width: 50%
}
#bloc_bas_gauche {
border-top: thin solid #a9a9a9;
text-align: left;
float: left;
width: 50%
}
#bloc_bas_droit {
border-top: thin solid #a9a9a9;
text-align: right;
float: right;
width: 50%
}
-->
</style>
</head>
<body>
<div id="container">
<div id="bloc_haut_gauche"><span id="icone1"><img src="ajax-loader.gif"/></span><span id="icone2"><img src="ajax-loader.gif"/></span></div>
<div id="bloc_haut_droit"><span id="icone3"><img src="ajax-loader.gif"/></span><span id="icone4"><img src="ajax-loader.gif"/></span></div>
<ul id="ulcontainer">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div id="bloc_bas_gauche"><span id="icone5"><img src="ajax-loader.gif"/></span><span id="icone6"><img src="ajax-loader.gif"/></span></div>
<div id="bloc_bas_droit"><span id="icone7"><img src="ajax-loader.gif"/></span><span id="icone8"><img src="ajax-loader.gif"/></span></div>
</div>
</body>
</html> |
Le résultat sous Firefox et sous IE7 en copies d'écrans ci-joint.
Comme vous le voyez, les deux boites formant en bas une barre devraient être bordurees de la bordure du conteneur dans lequel elles sont placees. Sous FF ces bordures n'apparaissent pas. Sous IE7 oui mais un espace vient s'ajouter sous les images ....
Mon objectif est évidement d'obtenir sous FF le rendu sous IE7 mais sans l'espace en trop.
Merci a l'avance de toutes aides et éclaircissements ....
Heirem
