Problème de bordures et d'espace selon FF ou IE7

**Heirem** · 09/12/2008, 22h11

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 :

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
 
<!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

Problème de bordures et d'espace selon FF ou IE7

CSS

Mode arborescent

Discussions similaires

Partager

Partager