| Spry problèmes de menu horizontale dans IE7
Robert Nitko - 11-07-2009 |
Salut. Comme beaucoup avant moi, je vais avoir un diable d'un temps de résoudre ce problème de la barre de menu. J'ai lu et lire et lire les messages précédents. Essayé essayé et essayé les solutions des gens mais en vain. Ce qui m'amène ici.
J'ai 6 catégories principales de ma barre du menu principal. En vertu de certains d'entre eux j'ai un sous-menu déroUlant. Dans d'autres, rien. Certains navigateurs afficher tous les 6 catégories tandis que l'Irlande se déplace en particUlier mon article 6e retour sous mon premier point. «fou!»Selon les mots de Louis King dans la jungle livre. Quel ennui.
Donc assez sûr que j'ai lu et essayé toutes ces grandes choses Richard Williams a aidé des gens avec si longtemps. Que Dieu le bénisse. Je suis sûr qu'il est malade de la même émission. Mais il semble être l'expert résident, Guru et sauveur. Mon chapeau à vous. You da man.
Donc je suis sommation lui encore une fois pour mon défi. Une mise en garde. Je serai en ajoutant une catégorie de plus à la barre de menu pour le rendre éventuellement 7, mais doute que cela ait un impact sur la solution.
Voici mon code de la sprymenubarhorizontal.Css
@ charset "utf-8";
/ * Sprymenubarhorizontal.CSS - version 0.6 - pré Spry-Release 1.6.1 * /
/ * Copyright (c) 2006. Adobe systèmes intégrés. Tous droits réservés. * /
/************************************************* ******************************
Mise en page des informations: Décrit le modèle de boîte, Positionnement, Z-order
************************************************** ***************************** /
/ * Le conteneur Ultrapériphériques de la barre de menus, Une boîte automatique largeur sans marge ou espacement * /
Ul.Menubarhorizontal
{
Marge: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Curseur: Par défaut;
Largeur: Auto;
}
/ * Placer la barre de menu active avec cette classe, Met actuellement en Z-index pour accueillir bug rendant à-dire: http:/ / therealcrisp.Xs4all.Nl / meuk / ie-zindexbug.html * /
Ul.Menubaractive
{
Z-index: 1000;
}
/ * Menu item containers, Enfants de Position relative à ce conteneur et sont une largeur fixe * /
Ul.Menubarhorizontal li
{
Marge: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Position: Relative;
Text-align: Gauche;
Curseur: Pointer;
Largeur: 8em;
Float: Gauche;
}
/ * Sous-menus doivent apparaître sous leur parent (en haut: 0) avec un supérieur Z-index, Mais ils sont d'abord sur le côté gauche de l'écran (-1000em) * /
Ul.Menubarhorizontal Ul
{
Marge: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Z-index: 1020;
Curseur: Par défaut;
Largeur: 8.2em;
Position: Absolue;
Gauche: -1000em;
}
/ * Sous-menu qui montre avec désignation de classe menubarsubmenuvisible, Nous avons mis à gauche à l'auto ainsi il vient sur l'écran en dessous de son élément parent menu * /
Ul.Menubarhorizontal Ul.Menubarsubmenuvisible
{
Gauche: Auto;
}
/ * Conteneurs option de menu sont même largeur fixe en tant que parent * /
Ul.Menubarhorizontal Ul li
{
Largeur: 8.2em;
}
/ * Sous-menus doivent apparaître chevauchant légèrement vers la droite (95%) et supérieur (-5%) * /
Ul.Menubarhorizontal Ul Ul
{
Position: Absolue;
Marge: -5% 0 0 95%;
}
/ * Sous-menu qui montre avec désignation de classe menubarsubmenuvisible, Nous avons mis de gauche à 0 si il vient sur l'écran * /
Ul.Menubarhorizontal Ul.Menubarsubmenuvisible Ul.Menubarsubmenuvisible
{
Gauche: Auto;
Haut: 0;
}
/************************************************* ******************************
Conception de l'information: Décrit le schéma de coUleurs, Frontières, Polices
************************************************** ***************************** /
/ * Sous-menu des conteneurs ont des frontières de tous les côtés * /
Ul.Menubarhorizontal Ul
{
Frontière: 1px solid # CCC;
}
/ * Options de menu sont un bloc gris clair avec un rembourrage et aucune décoration du texte * /
Ul.Menubarhorizontal une
{
Afficher: Block;
Curseur: Pointer;
Background-CoUleur: # eee;
Padding: 0.5em 0.75em;
CoUleur: # 333;
Text-decoration: None;
}
/ * Des éléments de menu qui ont la souris au-dessus ou de discussion ont un fond bleu et texte blanc * /
Ul.Menubarhorizontal une:Hover, Ul.Menubarhorizontal une:Focus
{
Background-CoUleur: # 33c;
CoUleur: # fff;
}
/ * Des éléments de menu qui sont ouverts avec des sous-menus sont mis à menubaritemHover avec un fond bleu et texte blanc * /
Ul.Menubarhorizontal une.MenubaritemHover, Ul.Menubarhorizontal une.MenubaritemsubmenuHover, Ul.Menubarhorizontal une.Menubarsubmenuvisible
{
Background-CoUleur: # 33c;
CoUleur: # fff;
}
/************************************************* ******************************
Sous-menu indication: Styles s'il existe un sous-menu en vertu d'un élément de menu donné
************************************************** ***************************** /
/ Menu items * qui ont un sous-menu ont la menubaritemsubmenu désignation de classe et sont configurés pour utiliser une image de fond Positionné à l'extrême gauche (95%) et centré verticalement (50%) * /
Ul.Menubarhorizontal une.Menubaritemsubmenu
{
Background-image: URL (sprymenubardown.Gif);
Background-repeat: No-repeat;
Background-Position: 95% 50%;
}
/ Menu items * qui ont un sous-menu ont la menubaritemsubmenu désignation de classe et sont configurés pour utiliser une image de fond Positionné à l'extrême gauche (95%) et centré verticalement (50%) * /
Ul.Menubarhorizontal Ul a.Menubaritemsubmenu
{
Background-image: URL (sprymenubarright.Gif);
Background-repeat: No-repeat;
Background-Position: 95% 50%;
}
/ Menu items * qui sont ouverts avec des sous-menus ont le menubaritemsubmenuHover désignation de classe et sont définis pour utiliser un Hover »« image de fond Positionné à l'extrême gauche (95%) et centré verticalement (50%) * /
Ul.Menubarhorizontal une.MenubaritemsubmenuHover
{
Background-image: URL (sprymenubardownHover.Gif);
Background-repeat: No-repeat;
Background-Position: 95% 50%;
}
/ Menu items * qui sont ouverts avec des sous-menus ont le menubaritemsubmenuHover désignation de classe et sont définis pour utiliser un Hover »« image de fond Positionné à l'extrême gauche (95%) et centré verticalement (50%) * /
Ul.Menubarhorizontal Ul a.MenubaritemsubmenuHover
{
Background-image: URL (sprymenubarrightHover.Gif);
Background-repeat: No-repeat;
Background-Position: 95% 50%;
}
/************************************************* ******************************
Hacks navigateur: Les hacks ci-dessous ne doit pas être modifié, sauf si vous êtes un expert
************************************************** ***************************** /
/ * Hack pour IE: Pour s'assurer que les sous-menus ci-dessus montrent les contrôles de formUlaire, Nous sous-tend chaque sous-menu avec une iframe * /
Ul.Menubarhorizontal iframe
{
Position: Absolue;
Z-index: 1010;
Filtre:(alpha opacité:0.1);
}
/ * Hack pour IE: Pour stabiliser l'apparence d'éléments de menu, la barre oblique à flotteurs est de garder IE 5.0 de parsing * /
@ media screen, Projection
{
Ul.Menubarhorizontal li.Menubaritemie
{
Afficher: Inline;
F \ Loat: Gauche;
Arrière-plan: # fff;
}
}
Merci d'avance.
Bob | |
