[Resolu] Display: block ne fonctionnant pas sur IE?

http://s.billard.free.fr/test/

Dans le menu de gauche j'ai crée de pseudo-boutons en jouant sur display: block et le couleurs de bordures et fond.

Or dans IE, quand j'aggrandis trop la police, du blanc apparait à droite de sliens alors que mes liens étant en block, ils devraient je pense occuper toute la largeur du conteneur non? L'affichage est par contre impecable sous FF.

Erreur de code ou bug IE?
Modifié par sebastien billard (11 Mar 2005 - 16:26)

ça c'est un comportement typique de IE car IE considère les textes qui s'affichent comme contenu dans le block alors que normalement, si un mot du texte est plus grand que le block, le bloc ne doit pas s'agrandir, mais le texte dépasser de celui ci. Sous Firefox il réagis bien en surimpression. Sous IE c'est bugué.

Mais il existe une solution, evite d'utiliser l'unité "em" pour la taille du texte ainsi IE ne pourra pas modifier la taille du texte.

Et avec un width : auto ?

Anthony : tu voudrais que je specifie une taille en pixels? pas genial comme solution

Raphael : je l'applique à quoi le width auto? à me liens en plus du display: block? il semble que ca marche pas

sebastien billard a écrit :
Raphael : je l'applique à quoi le width auto? à me liens en plus du display: block? il semble que ca marche pas

Oui en fait, il faut que les liens soient flottants pour que le width auto fonctionne. Je ne sais pas si c'est possible dans ton cas.

Arf non mes bloc de liens sont en absolute...

Seb, attention aux <h2> dans les <ul> qui sont interdits Utilise une <div>, dans laquelle tu placera le <h2> puis le <ul>

Tout à fait merci en plus je le savais j'avais juste pas retouché mon code... ca regle pas mon probleme principal mais c'est d'avantage valide

Tu es obligé de placer tes liens en absolu ?

C'est un moyen que j'ai trouvé pour faire mon layout. Mais d'autre solutions sont preferables je suis preneur

Bon j'ai refait mon layout avec des floats, par contre raphael j'ai toujours mon souci avec IE de liens mis en display: block qui refusent d'occuper toute la largeur disponible quand j'aggrandis la police.

Et en plus j'ai un espace entre le div contenu et les menus de droite et gauche maintenant dans IE (ok dans FF)...

Hmm c'est curieux, je suis sûr d'avoir lu un truc comme ça (width auto) pour régler ce problème mais je ne me souviens plus où exactement.
Je crois bien que c'est quelque part dans le bouquin d'Eric Meyer, je vais voir ça.

Sinon, en fait, en y repensant, il paraît logique que seuls les blocs de taille précisée en "em" devraient s'agrandir en même temps que la police. Il faudrait donc changer l'unité de taille des liens.

D'après mon expérience, je formulerais le problème de la manière suivante :

1/ IE étend un container à la taille de son contenu lorsque cette dernière est supérieure à la taille fixée pour le container. Cette règle "d'extension" s'applique toujours sauf lorsque le contenu est positionné en absolu.
2/ Malheureusement, dans le cas ou une "extension" a eu lieu, IE conserve pour l'élément "étendu" sa taille d'origine (au lieu de la taille étendue) pour l'application des règles CSS.

Je vois donc 2 solutions :
- prévoir la taille du container suffisamment large pour absorber tous les aléas du contenu
- passer le contenu en {position:absolute}.

La seconde solution consiste, sur l'exemple fourni, à basculer le design sur les <ul> et <li>, et d'imposer {position:absolute} pour les éléments <a>.

Mise à jour suite à lecture du post de Raphaël.
La solution que je proposais visait à design constant l'obtention d'une aparence similaire entre IE et FF. Mais la remarque de Raphaël est judicieuse : un changement d'unité permettrait sans doute d'avoir un container qui suit naturellement son contenu sur tous les navigateurs.
Modifié par Xavier (10 Mar 2005 - 18:33)

sebastien billard a écrit :
Allez une derniere question : Dans IE j'ai un ecart de quelques pixels entre mes menus et mon bloc contenu, que je n'explique pas, tous les margin etant à 0... Qu'est ce qui cloche?

Effectivement, tu as fais un reset général des marges (* { padding:0;margin:0; } ).
Donc à vue d'oeil, je dirais qu'il s'agit d'un problème de Modèle de boite dû certainement aux bordures sur les éléments.

Essaye de supprimer, pour voir, toutes les bordures du menu.

Sinon essaye la Méthodologie générale.

EDIT : à moins qu'il ne s'agisse du fameux bug des 3px sur IE
Modifié par Raphael (11 Mar 2005 - 15:56)

J'ai testé en local en enlevant absoluement toutes les bordures et cet écart persiste...

Edit : J'ai trouvé, il s'agit d'un bug dans le modele float de IE : l'ecart de 3px est systematique quand un element avec un width ou height suit une boite flottante
Modifié par sebastien billard (11 Mar 2005 - 16:25)

sebastien billard a écrit :
Edit : J'ai trouvé, il s'agit d'un bug dans le modele float de IE : l'ecart de 3px est systematique quand un element avec un width ou height suit une boite flottante

Tu n'as pas vu mon edit

Ah non j'avais pas vu merci par contre je comprends pas du tout comment appliquer la methode dans mon cas

je me suis heurté au même problème et j'ai trouvé la solution pour étendre une balise <a> sur tout le block <li> en utilisant :

a {
      display: block; 
      width: 100%;
}

Ca ne marche pas avec width: auto

A++
Modifié par kazcoco (06 Apr 2005 - 12:09)