5568 sujets

Sémantique web et HTML

Bonjour messieurs,

IE me fait des siennes.
Voila le sujet.

J'ai a designer cet élément : imaginez une boite avec le haut, gauche, droite complètement linéaire et de 1px (border-xxx) et le bas de cette boite est en forme d'ellipse.

Pour construire cela nous sommes partis sur ce type de boite :


            <div class="slot"> 
				<p>mon texte</p>
		<div class="slotall">&nbsp;<div class="slotleft">&nbsp;<div class="slotright">&nbsp;</div></div></div>
            </div>


Et voici mes classes :


.slot {border-bottom: 0 none;border-left:solid 1px #a1b0ad; border-top:solid 1px #a1b0ad; border-right:solid 1px #a1b0ad;}
.slotall
	{
	margin:-1em -0.5em;
	background:url(../img/common/slot_bottom.gif) bottom repeat-x;
	
	}

.slotleft
	{
	background:url(../img/common/slot_bottomleft.gif) bottom left no-repeat;
	
	}
.slotright
	{
	
	background:url(../img/common/slot_bottomright.gif) bottom right no-repeat;
	}	


Seulement voila !!!!

Avec des marges négatives IE me remet en bas de slot des traits qui ressemblent a des border-bottom.... Grrr ! (alors que FF ! pas de probs)
Quelqu'un a une idée ?

merci
Modifié par moon (13 May 2008 - 14:58)
Bonjour,

1. Ça me semble bien compliqué tout ça. On peut voir le design de la boite, pour voir s'il n'y a pas plus simple à faire?

2. À priori, on utiliser plutôt un bloc positionné en relatif et des éléments de décoration positionnés en absolu. Cf. la méthode pour faire des coins arrondis qui doit trainer ici ou là...
Florent V. a écrit :
Bonjour,

1. Ça me semble bien compliqué tout ça. On peut voir le design de la boite, pour voir s'il n'y a pas plus simple à faire?

2. À priori, on utiliser plutôt un bloc positionné en relatif et des éléments de décoration positionnés en absolu. Cf. la méthode pour faire des coins arrondis qui doit trainer ici ou là...


Hello Florent;
En effet j'ai utilisé une autre méthode plus simple a faire que ce que j'avais envisagé... Merci Smiley smile