Esprimere IT

In diverse occasioni, mentre si fa layout di pagina con le divisioni popup / lightbox / Consigli ecc ci imbattiamo in situazioni in cui alcuni oggetti a SELECT capita di essere in queste divisioni POPUP, dal design e si vede attraverso .... YUK!

Bene! si potrebbe facilmente risolvere questo problema modificando le Z-INDEX valori in modo appropriato per FF e IE7. Ma il buon vecchio (gioco di parole) IE6 non si comporta come previsto .... Lo spettacolo BOX Selezionare tramite, anche dopo aver applicato alcuni drasticamente elevati valori di Z-INDEX al Division PopUp ... Bummer!!

Non ci sono soluzioni per questo problema, ma ci sono, credo, più che un modo che pochi al mondo del lavoro attorno a questo problema, ma Im qui per dirvi la soluzione più semplice che uso, che funziona bene per me, nella maggior parte dei casi ....

"Nascondere la casella ROUGE Selezionare quando si DIMOSTRARE IL POPUP"

Semplicemente nel frammento di script in cui si mostra il popup, aggiungere un pezzo di script per impostare la visibilità del Box SELECT per "Hidden"

document.getElementById ('my_select') style.visibilty = "hidden".;

E ricordatevi di impostare nuovamente la chiusura di vostra divisione PopUp

. document.getElementById ('my_select') style.visibilty = "visible";

dove "my_select" è l'ID del Box irritazione SELEZIONA

Spero che questo aiuti ...

PS. Ci sono altre opzioni come ofcourse dinamicamente positionining un IFRAME (stesse dimensioni di PopUp) sotto il DIV Popup ... Questo funziona bene anche, ma con l'aggiunta di carichi di elementi DOM, script e mal di testa. Ho usato questa soluzione anche, e se hai bisogno di aiuto con questa opzione, non fatemelo sapere. Sarà lieto di aiutarvi!

Per anni, ho pensato di consolidare tutte le buone prassi, ho letto di tanto in tanto. Finalmente! Ho fatto scendere a metterlo a penna. Ho capito che sta per essere compito immane creazione di questo documento mammut, così ho deciso di dedicare un'intera categoria ad essa, così ho potuto continuare ad aggiungere roba sulle migliori pratiche, come e quando li incontrano ...

Bene! il contenuto qui sarà una fusione dei miei personali migliori pratiche UI di sviluppo con quelle scritte dagli sviluppatori di standard come Yahoo, Google ecc

Tieni d'occhio questo spazio e mantenere la doratura categoria Best Practices

Un reset CSS è / sono i CSS per impostare una serie di stili di elementi in una linea di base specifica che crea coerenza tra i vari browser.

Tutti siamo stati passante gli incubi di scrittura cross-browser CSS. Così, quando abbiamo iniziato a scrivere il nostro CSS, E 'una pratica per reimpostarla prima di rimuovere / ripristinare eventuali incoerenze cross browser. Ripristina CSS, sono semplici poche righe di CSS che iniziano con il CSS, fornendo una base pulita per iniziare a costruire il vostro momento.

Il reset CSS che normalmente tendono a utilizzare il seguente aspetto

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Ripristina la dimensione del carattere del browser
Da notare anche il reset che è stato applicato alla dimensione del font del browser nella riga seguente ...

html {font-size: 76%;}

Quanto sopra CSS azzera la dimensione del carattere del browser a 10 pixel, e questo rende possibile lavorare con dimensioni relative per i font (che è ogni importante dal punto di conformità WAI prespective)
Per esempio, nella seguente definizione, font-size in un arco è impostata a 10 pixel e che nel paragarph è impostato a 14 pixel ...

span {font-size: 1em;}
p {font-size: 1.4em;}