28173 sujets

CSS et mise en forme, CSS3

Pourquoi ce décalage disgracieux avec IE ?

Salut à vous,

J'ai réussi à mettre en place mes onglets dynamiques avec un fond d'image comme il faut (cf. le site avec les onglets).
Mais surprise (mauvaise qui plus est) sous IE 6 Smiley fache : un décalage existe pour l'image de fond !!!

Quelqu'un a une explication, une solution ?
Je suis partant pour la solution car en comprenant je me débrouillerais mieux la prochaine fois.

Merci d'avance
Modifié par pyxosledisciple (14 Dec 2006 - 18:13)
bonjour,

Bien sur qu'on à des solutions, probablement plusieurs d'ailleurs, mais sans le site, on à finalement que des questions ... Smiley decu

Jean-Pierre
jpv a écrit :
bonjour,

Bien sur qu'on à des solutions, probablement plusieurs d'ailleurs, mais sans le site, on à finalement que des questions ... Smiley decu

Jean-Pierre

Merci j'ajoute ce détail Smiley rolleyes au combien important.
Me suis pas penché sur le problème dans IE6, mais j'en ai constaté un autre :

Voici un petit test à effectuer, par exemple avec Firefox :
- aller sur la page d'accueil ;
- augmenter (même légèrement) la taille du texte ([Ctrl]+[+]) ;
- constater le problème avec : le premier menu (celui en anglais), le deuxième menu (en français), le formulaire de recherche.

La cause de tout ceci : des hauteurs fixées en pixels.

Autre petit problème constaté : pas d'attribut alt sur l'image de l'en-tête. Pourtant, si je regarde l'image, cet en-tête dit : « Jiwok, le blog du sport en musique... et vice-versa » (note : on n'écrit pas « vis versa »). Ça peut être bien de corriger cet oubli. Petit exemple :
[b]Avant :[/b]
<div id="header">
	<img src="http://www.pouxdagouti.org/gwok/wp-content/themes/unnamed-one-021beta/images/logo-jiwok3.gif" alt="" />
</div>

[b]Après :[/b]
<h1 id="header">
	<img src="http://www.pouxdagouti.org/gwok/wp-content/themes/unnamed-one-021beta/images/logo-jiwok3.gif" alt="Jiwog, le blog du sport en musique... et vice-versa" />
</h1>
mpop a écrit :
Me suis pas penché sur le problème dans IE6, mais j'en ai constaté un autre :

Voici un petit test à effectuer, par exemple avec Firefox :
- aller sur la page d'accueil ;
- augmenter (même légèrement) la taille du texte ([Ctrl]+[+]) ;
- constater le problème avec : le premier menu (celui en anglais), le deuxième menu (en français), le formulaire de recherche.

La cause de tout ceci : des hauteurs fixées en pixels.

Autre petit problème constaté : pas d'attribut alt sur l'image de l'en-tête. Pourtant, si je regarde l'image, cet en-tête dit : « Jiwok, le blog du sport en musique... et vice-versa » (note : on n'écrit pas « vis versa »). Ça peut être bien de corriger cet oubli. Petit exemple :
[b]Avant :[/b]
<div id="header">
	<img src="http://www.pouxdagouti.org/gwok/wp-content/themes/unnamed-one-021beta/images/logo-jiwok3.gif" alt="" />
</div>

[b]Après :[/b]
<h1 id="header">
	<img src="http://www.pouxdagouti.org/gwok/wp-content/themes/unnamed-one-021beta/images/logo-jiwok3.gif" alt="Jiwog, le blog du sport en musique... et vice-versa" />
</h1>



Merci de tes conseils qui en fait découlent tout naturellement d'une application réelle des principes d'accessibilité.
Malheureusement, je ne suis pas vraiment dans cette logique en ce qui concerne le design, donc je ne vais pas modifier grand chose en ce qui concerne l'utilisation des pixels à la place des em ou autre.
Par contre, je vais corriger très rapidement l'absence d'alternative aux images.

@+
Sujet clos
Aller à