[CSS]Ecart entre blocs de type div

**elspliffo** · 18/07/2006, 23h47

Bonjour à tous,
je continue ma galère avec IE, suite à mon post récent qui a été résolu très rapidement (un grand merci d'ailleurs aux personnes m'ayant répondu), il m'arrive un nouveau problème (a priori tout bete).
Grosso modo je veux afficher 2 blocs l'un en dessous de l'autre (un bleu puis un noir), cela fonctionne très bien avec firefox mais je me retrouve avec un écart vertical entre les 2 blocs dans IE et je ne comprends pas pourquoi.
Voici le code :
Test.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
 
/* CSS Document */
body {
  background-image:url(images/fond.gif);
  text-align: center ;
  padding: 0 ;
  }
 
 
div#conteneur {
	width: 980px ;
	margin: 0 auto ;
	text-align: left;
}
 
/*line height pour IE afin qu'il n'aggrandisse pas le bloc à la taille
de la police, plus ajout d'un contenu dans le div de type &nbsp pour que
le bloc ne soit pas vide (toujours pour compatibilité avec IE)*/
div#blueline {
		 height:9px;
		 background-color:#3399ff;
		 line-height: 1px;
		 }
 
div#blackline {
		 height:25px;
		 background-color:#000000;
		 color: #FFFFFF;
		 }

Code HTML

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <link href="Test.css" rel="stylesheet" type="text/css">
  <title></title>
  </head>
  <body>
  <div id="conteneur">
    <div id="blueline">&nbsp;</div>
    <div id="blackline">Bonjour!</div>
    </div>
  </body>
</html>

Merci encore d'avance pour toute aide.
tchao!!

**MasterOfChakhaL** · 19/07/2006, 00h07

Pour eviter d'avoir des surprises, tu devrais mettre cela dans ton code css:

Code :

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

1
2
3
4
5
 
* {
  margin:0;
  padding:0;
}

Tu gommeras ainsi les diiférences dans l'interprétation du modèle de boite entre ces différents navigateurs...
Ensuite, il te restera à définir le margin et les padding là où ils doivent l'être

**elspliffo** · 19/07/2006, 00h24

Merci pour ta réponse, c'est clair qu'il vaut mieux tout avoir à spécifier soit meme, au moins on est censé bien controler l'affichage. Hélas ici l'écart persiste entre les 2 blocs même en ajoutant ton code a ma css, celle ci donne désormais
:
Test.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
 
/* CSS Document */
* {
  margin:0;
  padding:0;
}
 
body {
  background-image:url(images/fond.gif);
  text-align: center ;
  padding: 0 ;
  }
 
 
div#conteneur {
	width: 980px ;
	margin: 0 auto ;
	text-align: left;
}
 
/*line height pour IE afin qu'il n'aggrandisse pas le bloc à la taille
de la police, plus ajout d'un contenu dans le div de type &nbsp pour que
le bloc ne soit pas vide (toujours pour compatibilité avec IE)*/
div#blueline {
		 height:9px;
		 background-color:#3399ff;
		 line-height: 1px;
		 }
 
div#blackline {
		 height:25px;
		 background-color:#000000;
		 color: #FFFFFF;
		 }

**MasterOfChakhaL** · 19/07/2006, 00h35

Peut-être est-ce le fameux coup qui veut que IE n'ignore pas les sauts de lignes tout a fait...

essaye ca pour voir:
HTML:

Code :

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

1
2
3
4
 
<div id="conteneur">
    <div id="blueline">&nbsp;</div><div id="blackline">Bonjour!</div>
</div>

Mais bon, si c'est ça, c'est quand même le genre de truc qui fout les boules et contre lesquel on n'a pas envie de se battre...

sur ce, bonne nuit

**masu** · 19/07/2006, 11h34

alors l'ideal c'est de mettre un border si le background est une couleur unie

Code :

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

1
2
3
4
5
6
7
8
9
10
HTML
<div id="blackline">Bonjour!</div>
CSS
div#blackline {
		 height:25px;
		 background-color:#000000;
		 color: #FFFFFF;
		 border-top: 9px solid #3399ff;
}

mais j'ai cru comprendre dans un autre poste q'il s'agit d'une image. La solution que j'ai trouvé n'est pas tres "jolie" niveau code mais apparement ca marche. Don si quequ'un a quelque chose de plus simple ca pourrai etre bien

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
div#blueline {
		 height:9px;
		 background-color:#3399ff;
		 line-height: 1px;
		 width:100%;
		 float:left;
}
		 
div#blackline {
		 height:25px;
		 background-color:#000000;
		 color: #FFFFFF;
		 clear:both;
		 border-top: 9px solid #3399ff;
		 }

**elspliffo** · 19/07/2006, 23h13

merci encore... ca fonctionne nickel.
Cependant, vu les problèmes que m'occasionne IE pour des
positionnement a priori assez simple, j'avoue que je doute de
l'utilisation que je vais faire des CSS pour le positionnement des blocs.
La norme CSS est très bien faite mais si IE l'interprete mal et que,
de toute manière, il faut le supporter (dans tous les sens du terme),
est-ce toujours aussi intéressant?
J'aimerai avoir vos retour la dessus.
Merci!!

[CSS]Ecart entre blocs de type div

CSS

Vue hybride

Discussions similaires

Partager

Partager