Discussion :

[arzatoth]

Voila, je suis en train de codé un petit cadre tout simple en CSS, c'est ma première realisation avec ce procédé.
Mon problème:
mon cadre s'affiche parfaitement sous firefox et sous le visualiseur *design* de dreamweaver.
Sous IE par contre, j'ai une ligne de vide entre deux div. Je n'arrive pas a la supprimer.

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
16
17
18
19
 
<div class="cadre">
	<div class="haut">
		<div class="haut-droite">
		</div>
	</div>
	<div class="centre">
 
		<div class="contenu">
 
		    <img src="deco-gauche.gif" class="deco-gauche"/>
                    <p class="texte"></p>
		</div>
       </div>
  		<div class="bas">
		    <div class="bas-droite">
		    </div>
	       </div>
</div>

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
 
<style type="text/css">
	.cadre { width:300px;   }
	.haut { height:14px; background-image:url(haut-gauche.gif); background-repeat:no-repeat;  }
	.haut-droite {height:14px; width:18px; background-image:url(haut-droite.gif); background-repeat:no-repeat; float:right; }
	.bas { height:24px; background-image:url(bas-gauche.gif); background-repeat:no-repeat; }
	.bas-droite { height:24px; width:18px; background-image:url(bas-droite.gif); background-repeat:no-repeat; float:right; }
	.centre { background-image:url(gauche.gif); background-repeat:repeat-y; }
	.contenu { background-image:url(droite.gif); background-repeat: repeat-y; background-position: right;  }
	.deco-gauche { float:left; }
	.texte { margin:0px; padding:12px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify; color: #666666; }
	.titre { margin:0px; padding:10px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style:italic; text-decoration:underline; }
 
</style>

l'url du cadre
http://design.rc-night.com/cadre_rc-night/cadre.html

Merci d'avance ^^

[Bisûnûrs]

Code CSS :

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

.haut { height:14px; background-image:url(haut-gauche.gif); background-repeat:no-repeat;line-height:14px;font-size:2px  }

[arzatoth]

Merci beaucoups pour cette réponse si rapide!

cela dit, je débute, et je me demande:
Je vois que tu as ajouté des propriétés plutot basée sur le texte. Est-ce juste un moyen de contourné un bug IE ou est-ce que j'ai fait une erreur d'analyse en n'y pensant pas ?

[Bisûnûrs]

C'est un bug d'IE qui ne veut pas créer de div avec une hauteur inférieure à 20px, pour laisser de la place à du texte éventuel.

[arzatoth]

merci pour cette précision alors. Je comprend mieu.