Bug IE tutoriel "Créer des menus simples

Bonjour,

Un problème bien embêtant, j'étais en train de regarder comment faire un menu horizontal en suivant ce tuto et en essayant chez moi je remarque que si on enlève la baslie <h1> avant le menu et la balise <p> juste en dessous du menu, le padding appliqué au lien n'est plus appliqué, sur IE 7 évidemment...

Comment faire pour corriger ce problème ? Je dois faire un menu horizontal en utlisant les padding pour les liens et qui soit compatible IE7....

Merci d'avance

Bonjour,

Compatible IE7? Quelle drôle d'idée...

Je ne vois pas trop pourquoi supprimer un élément avant ou après influerait sur le rendu. Peut-être est-ce tout simplement que la zone de padding n'a plus la place de s'afficher? En effet, le padding vertical sur un élément en display:inline ne va pas faire augmenter la hauteur de ligne de la ligne de texte dans laquelle se trouve un élément (à l'inverse de ce que ferait une image par exemple). Autrement dit, le padding vertical d'un élément en display:inline «déborde», et il faut en tenir compte dans la mise en page.

Par contre ce comportement est valable pour tous les navigateurs, pas juste pour IE7. S'il y a un problème spécifique à IE7, ça peut être une bizarrerie comme par exemple un bloc parent qui «coupe» tout ce qui dépasse, alors même que ce bloc parent n'est pas en overflow:hidden. Dans ce cas ça peut être lié à un problème de HasLayout (faire une recherche sur ce concept s'il n'est pas connu).

bonsoir,

c'est en fait un vieux défaut/bug de IE que IE7 traine encore , défaut relatif au balise A . Si le layout cure le defaut (avec zoom:1; ou display:inline-block; par exemples ) un line-height approprié sera moins brutale pour corrigé ce défaut .

Visiblement ce défaut serait mis en évidence avec/selon les fusions de marges.

GC

<edit>defaut qui coupe la balise a en ne faisant par exemple ne pas apparaitre une bordure basse , ...

sur l'exemple : font est a 1em , on peut l'estimer environ a 10 pixels (en fait c'est plutot 14 pixels qui seront necessaire pour afficher le haut des lettre f ou t et le bas des lettres p ou y ... on prend donc que ces 10 pixels utiles a afficher une lettre sans tête ni jambe : e ( en principe là le lecteur fait : 'heu .. on lache un sourire ironique et compatissant )

tu a un padding vertical de 4px X 2 = 8px
tu as des bordures de 1px = 2px

on arrive donc a padding + bordures a 10 pixels , qu'on peut a nouveau estimer a 1em ( heu ... )

En finale , pour IE lte 7 , il te faut un line-height:2em ; pour le voir a la hauteur voulue et apercevoir les bordures .

Pour l'explication techniquo-academique je laisse les pros se charger de te les donné ou te fournir leur lien de 'refereences'.

Cordialement

</ edit>