28219 sujets

CSS et mise en forme, CSS3

[Résolu] Les pixels ne sont pas les mêmes sous Firefox et IE

Bonjour,

J'ai une page réalisé en full CSS.
Or je constate une différence d'interprétation sur une marge droite de 3 pixels.

Pas de problème pour les vrais navigateurs (Firefox, Opera, Netscape) mais sous IE, cela donne l'impression d'une marge de 6 pixels et non 3 comme demandé. Ce qui décale complètement le reste du menu.

La page
La différence se fait sur l'espace entre les blocs noirs. Normalement 3 pixels sauf pour IE.

Existe-il une solution ?

merci
Modifié par tannoy (18 Nov 2005 - 13:32)
Merci pour ta réponse mais ici ce n'est pas un problème de boite mais un problème de marge.

En effet, je n'utilise pas de bordures et j'ai un padding à 0 pour tous mes blocs.

Le problème se situe sur une différence d'interprétation de la valeur 3 pixels.
le probleme de différence d'interprétation des largeurs de boîte s'applique également aux marges. 1px(border gauche)+1px(border droite)+1px(margin right)=3px
tu peux utiliser un hack de ce type
ul#menu a {
	margin-right:1px;
	width: 82px; /* on définit la taille du bouton de menu */
	height: 17px;
	float: left;
	display: block;
	text-align: center;
	text-decoration: none;
	color:  #FFFFFF;
	font-weight: normal;
	background-color: #000000;
}
html>body ul#menu a {
margin-right:2px;
}

Le premier margin-right s'applique à IE, et le 2eme corrige pour les navigateurs standards.
Modifié par yyoupla (17 Nov 2005 - 15:04)
Désolé, Yyoupla a répondu avant moi

Bonjour tannoy,
je crois que tu devrais quand même retourner sur le lien que yyoupla t'a donné, car cela ne concerne pas que les marges internes mais aussi les marges externes. Or, tu as 

ul#menu a {
	margin-right:3px;
}

dans ta feuille de style.
C'est réellement le mode de calcul des largeurs de boîte qui est en jeu ici.

A plus
Modifié par energizer (17 Nov 2005 - 15:21)
Désolé les gars, j'étais trop sûr de moi sur le modèle de boites.

Mea culpa Smiley rolleyes

Merci encore pour tout
Non, il s'agit du bug de la double marge de IE sur les flottants, qui n'a rien à voir avec le modèle de boîtes.

En mode "compliant" le modèle de boîte est le même sur IE 6 et les autres.

En l'occurence le bug, ici double la marge des <a> en float:left. En retirant le "dispay: block;" de "ul#menu a{}" qui de toute façon est induit par le "float:left;" et en rajoutant un "display: inline;" tout au début, le bug disparaît. C'est un peu un hack, mais un hack pas méchant et sans trop de risques.
Merci à tous.

En supprimant le display:block en effet inutile, le bug disparaît.

merci bill Smiley fache

merci Lanza Smiley biggrin Smiley cligne

@+
Sujet clos
Aller à