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

**c_s_s** · 09/12/2008, 22h39

Bonsoir,

Je te propose de mettre des marges nulles sur l'élément <ul id="ulcontainer"> pour éviter des espaces non désirés.

Ensuite, un clear:both ou clear:left sur ce même élément évitera les problèmes de positionnement dûs aux propriétés flottantes que tu as mis sur tes éléments #bloc_haut_gauche et #bloc_haut_droit

Ce qui donne :

Code css :

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

1
2
3
4
5
6
7
ul#ulcontainer {
	list-style-position: outside;
	padding-right: 5px !important;
	padding-bottom: 5px !important; 
	margin:0;
	clear:both;
}

Au passage, attention de bien écrire ul#ulcontainer et pas ul#_ulcontainer (_ étant un espace) !

Pour terminer, et pour que tes blocs #bloc_bas_gauche et #bloc_bas_droit soient bien "bordurés", il faut qu'ils soient bien contenus dans ton bloc #container (ce qui est délicat avec leurs propriétés flottantes).
Tu peux donc ajouter un overflow:hidden sur #container .

Code css :

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

1
2
3
4
5
6
7
8
#container {
	position: relative;
	width: 640px;
	border: thin solid #a9a9a9;
	margin: 3em auto;
	text-align: left;
	overflow:hidden;
}

Normalement, ça devrait aller beaucoup mieux après ça.

**Heirem** · 09/12/2008, 23h02

Merci à toi !

Cela va beaucoup mieux ... mais seulement sous FF

Effectivement je venais de me rendre compte que les "float" étaient en cause vu qu'en ajoutant un padding-bottom au #container je voyais apparaître enfin une bordure basse.

Mais comme j'aime comprendre, veux-tu m'expliquer le rapport entre le overflow:hidden; et les float ? C'est supposé supprimer tout ce qui dépasse et là je ne vois pas ...

Et puis sous IE7 je me retrouve toujours avec cette espaces en bas auxquels tous les margin du monde n'ont aucun effets. Encore plus difficile à cerner quand on a pas les outils d'analyses CSS de FF avec IE !

Merci d'avance !

**c_s_s** · 09/12/2008, 23h19

Alors, en gros, imaginons un bloc "conteneur" dans lequel tu as un élément "toto".

La hauteur de "conteneur" dépend de l'élément "toto.

Si tu mets un float sur l'élément "toto", c'est comme si tu sortais "toto" du "conteneur".
Du coup, le "conteneur" se réduit puisqu'il croit qu'il ne contient plus rien.

Pour corriger ça, on utilise la propriété overflow (hidden, ou auto). Cela revient à dire au "conteneur" qu'il contient toujours l'élément "toto".

oveflow:hidden masquera ce qui dépasse seulement si tu donnes une hauteur fixe au bloc "conteneur".

Sinon je ne constate pas d'espace en bas sous IE7.
Quelle est la taille de ton image "ajax-loader.gif" ?

**Heirem** · 09/12/2008, 23h37

Uhmm je vois mieux. Je comprend ce que tu veux dire mais c'est une "logique" issue de l'expérience, plus que de la définition des règles

L'image fait 16x16px. En jouant sur la sélection à la souris des objets sous IE je vois bien que l'image n'a pas été déformée.

J'ai cependant trouvé une solution qui fonctionne sous IE : un padding:0; dans le #container a résolu le problème de l'espace sous les images. Si tu n'a rien de mieux à me proposer je vais me résoudre à placer un hack IE pour que cela fonctionne sous les deux navigateurs

Merci encore.

PS : J'ai parlé trop vite et pas réfélchis, pas besoin de hack !

Bon ben ça marche comme je veux !
Pas d'autre chose à dire ?
Je peux qualifier tout cela de résolu ?

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

CSS

Vue hybride

Discussions similaires

Partager

Partager