| Spry problemi menu orizzontale in IE7
Robert Nitko - 11-07-2009 |
Salve. Come molti altri prima di me Sto avendo un mucchio di tempo con la soluzione di questo problema barra dei menu. Ho letto e leggere e leggere i post precedenti. Provato provato e riprovato le soluzioni delle persone inutilmente. Che mi porta qui.
Ho 6 categorie principali sUlla mia barra dei menu principale. Con alcuni di loro ho un menu a discesa sotto menu. In altri nUlla. Alcuni browser visualizza tutte le 6 categorie, mentre si muove cioè in particolare il mio articolo 6 schiena sotto la mia prima voce. "Crazy!"Nelle parole di Luigi re nel libro della giungla. Che noia.
In modo abbastanza sicuro di aver letto e provato tutte quelle grandi cose Williams Richard è stato aiutare le persone con così a lungo. Dio lo benedica. Sono sicuro che è malato della stessa emissione. Ma sembra essere un esperto di, Guru e Salvatore. Il mio cappello a voi. Ti da uomo.
Così mi chiama lui, ancora una volta per la mia sfida. Un caveat. Sarò l'aggiunta di una categoria più alla barra di menu alla fine di renderlo 7, ma dubito che avrà un impatto sUlla soluzione.
Ecco il mio codice della sprymenubarhorizontal.CSS
@ charset "utf-8";
/ * Sprymenubarhorizontal.CSS - Versione 0.6 - Spry pre-release 1.6.1 * /
/ * Copyright (c) 2006. Adobe sistemi integrati. Tutti i diritti riservati. * /
/************************************************* ******************************
Disposizione delle informazioni: Descrive box model, Posizionamento, Z-order
************************************************** ***************************** /
/ * Il contenitore esterno della barra dei menu, Una casella di auto larghezza senza Marginei o Padding * /
Ul.Menubarhorizontal
{
Margine: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Cursore: DefaUlt;
Ampiezza: Auto;
}
/ * Impostare la barra dei menu attiva con questa classe, Attualmente su Z-index per ospitare bug di rendering vale a dire: http:/ / therealcrisp.XS4ALL.NL / meuk / ie-zindexbug.html * /
Ul.Menubaractive
{
Z-index: 1000;
}
/ Contenitori voce di menu *, Bambini posizione rispetto a questo contenitore e una larghezza fissa * /
Ul.Menubarhorizontal li
{
Margine: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Posizione: Relativo;
Text-align: Sinistra;
Cursore: Puntatore;
Ampiezza: 8em;
Float: Sinistra;
}
/ * Sottomenu dovrebbe apparire al di sotto dei genitori (in alto: 0) con un più alto Z-index, Ma sono inizialmente fuori il lato sinistro dello schermo (-1000em) * /
Ul.Menubarhorizontal Ul
{
Margine: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Z-index: 1020;
Cursore: DefaUlt;
Ampiezza: 8.2em;
Posizione: Assoluta;
Sinistra: -1000em;
}
/ * Sottomenu che sta dimostrando con designazione della classe menubarsubmenuvisible, Abbiamo fissato a sinistra per auto cosi 'si tratta sUllo schermo sotto la sua voce di menu principale * /
Ul.Menubarhorizontal Ul.Menubarsubmenuvisible
{
Sinistra: Auto;
}
/ * Contenitori voce di menu vengono stessa larghezza fissa come genitore * /
Ul.Menubarhorizontal li Ul
{
Ampiezza: 8.2em;
}
/ * Sottomenu dovrebbe apparire leggermente spostato a destra (95%) e fino (-5%) * /
Ul.Menubarhorizontal Ul
{
Posizione: Assoluta;
Margine: -5% 0 0 95%;
}
/ * Sottomenu che sta dimostrando con designazione della classe menubarsubmenuvisible, Abbiamo stabilito lasciato a 0 quindi si tratta sUllo schermo * /
Ul.Menubarhorizontal Ul.Menubarsubmenuvisible Ul.Menubarsubmenuvisible
{
Sinistra: Auto;
Superiore: 0;
}
/************************************************* ******************************
Information design: Descrive la combinazione di Colorei, Frontiere, Fonts
************************************************** ***************************** /
/ Contenitori sottomenu * hanno frontiere su tutti i lati * /
Ul.Menubarhorizontal Ul
{
Di frontiera: 1px solid # ccc;
}
/ * Le voci di menu sono un blocco di Coloree grigio chiaro con imbottitura e nessuna decorazione del testo * /
Ul.Menubarhorizontal uno
{
Visualizzare: Blocco;
Cursore: Puntatore;
Background-Colore: # eee;
Padding: 0.5em 0.75em;
Colore: # 333;
Text-decoration: None;
}
/ * Le voci di menu che hanno il mouse sopra o Focus hanno uno sfondo blu e testo bianco * /
Ul.Menubarhorizontal uno:Hover, Ul.Menubarhorizontal uno:Focus
{
Background-Colore: # 33c;
Colore: # fff;
}
/ * Le voci di menu che si apre con sottomenu sono impostate per menubaritemHover con uno sfondo blu e testo bianco * /
Ul.Menubarhorizontal uno.MenubaritemHover, Ul.Menubarhorizontal uno.MenubaritemsubmenuHover, Ul.Menubarhorizontal uno.Menubarsubmenuvisible
{
Background-Colore: # 33c;
Colore: # fff;
}
/************************************************* ******************************
Sottomenu indicazione: Stili se c'è un sottomenu nel quadro di un determinato elemento di menu
************************************************** ***************************** /
/ * Le voci di menu che hanno un sottomenu hanno menubaritemsubmenu designazione della classe e sono impostate per utilizzare un'immagine di sfondo posizionata sUlla sinistra (95%) e centrato in verticale (50%) * /
Ul.Menubarhorizontal uno.Menubaritemsubmenu
{
Background-image: Url (sprymenubardown.Gif);
Background-repeat: No-repeat;
Background-Posizione: 95% al 50%;
}
/ * Le voci di menu che hanno un sottomenu hanno menubaritemsubmenu designazione della classe e sono impostate per utilizzare un'immagine di sfondo posizionata sUlla sinistra (95%) e centrato in verticale (50%) * /
Ul.Menubarhorizontal Ul uno.Menubaritemsubmenu
{
Background-image: Url (sprymenubarright.Gif);
Background-repeat: No-repeat;
Background-Posizione: 95% al 50%;
}
/ * Le voci di menu che si apre con sottomenu hanno menubaritemsubmenuHover la designazione della classe e sono impostate per utilizzare un Hover "immagine di sfondo posizionata sUlla sinistra (95%) e centrato in verticale (50%) * /
Ul.Menubarhorizontal uno.MenubaritemsubmenuHover
{
Background-image: Url (sprymenubardownHover.Gif);
Background-repeat: No-repeat;
Background-Posizione: 95% al 50%;
}
/ * Le voci di menu che si apre con sottomenu hanno menubaritemsubmenuHover la designazione della classe e sono impostate per utilizzare un Hover "immagine di sfondo posizionata sUlla sinistra (95%) e centrato in verticale (50%) * /
Ul.Menubarhorizontal Ul uno.MenubaritemsubmenuHover
{
Background-image: Url (sprymenubarrightHover.Gif);
Background-repeat: No-repeat;
Background-Posizione: 95% al 50%;
}
/************************************************* ******************************
Browser hack: Gli hack qui di seguito non devono essere modificati a meno che non sei un esperto
************************************************** ***************************** /
/ * Hack per IE: Per assicurarsi che il sub menu Visualizza sopra i controlli dei modUli, Siamo alla base di ogni sottomenu con un iframe * /
Ul.Menubarhorizontal iframe
{
Posizione: Assoluta;
Z-index: 1010;
Filtro:Opacità alpha (:0.1);
}
/ * Hack per IE: A stabilizzare l'aspetto delle voci di menu, la barra in Float è quello di mantenere cioè 5.0 di parsing * /
@ media screen, Proiezione
{
Ul.Menubarhorizontal li.Menubaritemie
{
Visualizzare: Inline;
F \ loat: Sinistra;
Sfondo: # fff;
}
}
Grazie in anticipo.
Bob | |
