28173 sujets

CSS et mise en forme, CSS3

Petit bloc de 10x10 px avec bordures

Bonjour à tous,

Ayant découvert un petit soucis très embêtant dans la différence d'interprétation des bordures entre IE et Firefox, je rencontre un problème pour dessiner un petit carré de 10 pixels, auquel j'attribue une bordure de 2 pixels.

.smallBloc {
width: 10px;
height: 10px;
border: 2px solid #000000;
font-size: 0;
}

...

<div class="smallBloc">&nbsp;</div>


Sous Firefox, j'obtiens un carré de 12x12 pixels. Par contre, IE me dessine de carré de 10x10 pixels, bordure comprise !

Alors au fond, qui a raison ? Et surtout, comment faire pour que le rendu de cette forme des plus basique soit similaire dans les 2 navigateurs ? La seule solution radicale que j'ai trouvé pour l'instant... est d'afficher une image... Smiley ohwell

Merci d'avance pour toute réponse
Modifié par Amnesiak (19 Oct 2006 - 22:56)
Bonjour,

A ma petite expérience à part un code du style ( ou approchant ) :

.smallBloc {
width: 12px;/* pour IE */
height: 12px;
border: 2px solid #000000;
font-size: 0;
}

html>body .smallBloc   {
width: 10px;
height: 10px; /*valeur pour FF  nb : IE ne "sait pas lire ce type de balise et l'ignore pas FF*/
}
Modérateur
bonjour,

peut-etre n'as tu pas un doctype valide ?

en testant ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"><html><head><title>HTML 4.01 

Transitional</title>
<style type='text/css'>
	.smallBloc {
	height:10px;
	width:10px;
	line-height:10px;
	border:2px solid #000;
	display:block;
}
</style>
	<!--[if IE]>
		<style type="text/css">
<!--
	/* style a ajouté si IE est en quirk mode */
/*	.smallBloc	 {
			padding-left:10px;
			}
*/
-->
</style>
<! endif -->
</head><body>
<span class="smallBloc"></span>
</body></html>


j'ai volontairement changer le div en span , et enlever l'espace insecable , car sans css l'un est l'autre disparaisse visuellement , le span ne provoquera pas de saut de ligne . le div ,oui, et il correspond plus a une zone qu'a un <hr>.

++


<edit> ce petit carré de 10x10 s'affiche avec les bordures en 14x14 , dans les 2 navigateurs Smiley cligne . comportement normal en mode standard
Modifié par gcyrillus (19 Oct 2006 - 23:32)
Sujet clos
Aller à