[RESOLU]Pb d'alignement sous FIREFOX d'une image réactive

Hello,

J'ai un petit problème uniquement sous firefox avec un picto :
sur la home page du site de www.nestle.com, il y a une portion de texte "breastmilk is best for babies", et immédiatement à droite il y a un petit picto. Ce picto est correctement aligné sauf sous Firefox ou il est trop haut et je n'arrive pas à corriger le tir.

En fait il s'agit là, d'une balise IMG incluse dans une balise A, rien de bien compliqué apparemment, mais j'ai essayé de reproduire le pb, et tout se passe bien.
Je pense donc que le comportement de cette balise IMG est influencé par un style d'un de ses parent.

Le style de l'image est :

img.picto
{
	margin:0 0 0 0;
	border: 0px;
	padding-top:3px;	
	vertical-align:bottom;
}

Merci de votre aide,

Pascal

Salut
As tu essayé avec un:

align="absmiddle"

sur ton image?

salut,

Je viens d'essayer mais ça ne change rien sous FIREFOX.
Par ailleurs, en rajoutant cet attribut on met de la mise en forme dans le code html ce que je ne souhaite pas non plus.
Je préfèrerai trouver une solution CSS.

J'ai déjà essayé différentes valeurs pour vertical-align, mais rien n'y change non plus.

Merci quand même,
Modifié par Pascal68bis (18 Dec 2007 - 12:45)

Ok mais est-ce que tu as supprimé les autres attributs CSS en faisant ca (jdirais que c'est pour ca que ca ne fonctionne pas)?
J'avais aussi galéré la dessus, ms ce truc marche chez moi, sinon jvois pas dsl
Ca marche aussi en mettant seulement

align:absmiddle;

dans ta feuille de style normalement, mais faut que tu vires le reste
Modifié par batssa (18 Dec 2007 - 12:59)

a écrit :
Je pense donc que le comportement de cette balise IMG est influencé par un style d'un de ses parent.

C'est pas faux

 http://www.nestle.com/css/Home.css
 
#col1 img, #col2 img 
{
[#red]margin-left: 5px;
margin-bottom: 15px;[/#]
}

A toi de jouer sur ces valeurs pour corriger le tir sans "déranger" le reste

@batssa : Je ne suis pas sûr que la valeur absmiddle n'est jamais existé dans un langage standardisé en tout cas pour l'élément image ?...
vertical-align:middle avec un display:block ou inline-bock doit fonctionner (à vérifier suivant les navigateurs)

Cdt,
Sylvain

J'ai remplacé :

img.picto

{

	margin:0;

	border: 0;

	padding-top:3px;	

	vertical-align:bottom;


}

par :

img.picto

{

align : absmiddle;


}

mais ça ne marche pas

@6l20 : oui ça pourrait être ça , mais là j'ai fait un test en supprimant complètement le style :

#col1 img 

,#col2 img

{

margin-left: 5px;

margin-bottom: 15px;

}

et le problème persite ... j'en déduis que ça n'influence pas ou presque pas.

Modifié par Pascal68bis (18 Dec 2007 - 13:21)

Par ailleurs, si on suppose que le picto soit influencé par un style parent, ce qui semble être le cas, si on met des valeurs nulles aux padding et margin :

img.picto

{

	margin:0;

	border: 0;

	padding-top:3px 0 0 0;	

	vertical-align:bottom;


}

il ne devrait plus être influencé par des padding ou margin parents, vu qu'ils ont été redéfinis.

Il est peut-être influencé par un autre style, autre que padding ou margin...
Modifié par Pascal68bis (18 Dec 2007 - 13:33)

tu avais raison 6l20!!
Il est bien influencé par le parent col1 :

#col1 img 

,#col2 img

{

margin-left: 5px;

margin-bottom: 15px;

}

en fait, vu que la page obeit à 2 css et que des styles sont définis dans les 2 (dont le style pour col1, que je vais enlever de nestle.css), il y a eu confusion, j'ai effectué les tests sur nestle.css au lieu de home.css

Merci !

C'est curieux, cela fonctionne chez moi !?...

Quoiqu'il en soit, pour ce que tu tentes de faire ce petit tuto couplé à la propriété before/after devrait grandement te faciliter la tâche :

a.lien_ext:after {
content: url(ton image);
}

Modifié par 6l20 (18 Dec 2007 - 14:33)

Pour une fois que j'ai raison
Ravi que cela s'arrange
Ceci dit, prends le temps de lire le tutoriel en lien dans mon précédent message

@+

Vu que le pb n'apparaît que sur firefox , j'ai utilisé !important comme solution :

#col1 img 
,#col2 img
{

margin-left: 5px;
margin-bottom: 6px !important;
margin-bottom: 15px;
}

tu es sûr du lien de ton tuto? Lorsque je clique dessus il me ramène à cette page...
Modifié par Pascal68bis (18 Dec 2007 - 14:34)

Oup's j'ai merdu lien corrigé