Udtrykke det

Ved flere lejligheder, osv., mens laver sidelayout med popup afdelinger / lightboxer / Tips, vi kommer på tværs af situationer, hvor nogle Form Markere objekter sker for at være under disse POPUP divisioner, ved design, og det skinner igennem .... YUK!

Nå! du kan nemt løse dette ved at justere dine Z-indeksværdier passende til FF og IE7. Men den gode gamle (pun intended) IE6 ikke opfører sig efter hensigten .... SELECT BOX showet igennem, selv når du anvender nogle drastisk høj Z-indeksværdier til din popup Division ... Øv!!

Der er INGEN rettelser til dette problem, men der er, tror jeg, mere end et par måde at arbejde-around dette problem, men Im her for at fortælle dig den enkleste løsning, som jeg bruger, som virker fint for mig, i de fleste af de sager ....

"Skjul ROUGE SELECT felt, når du viser POPUP"

Blot i dit script kodestykke hvor du viser din popup, tilføje et stykke script til at indstille synligheden af ​​SELECT Box til "Hidden"

document.getElementById ('my_select') style.visibilty = "skjult".

Og husk at sætte det tilbage ved lukning af din popup Division

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

hvor "my_select" er ID'et for den irritation SELECT Box

Håber dette hjælper ...

PS. Der er ofcourse andre muligheder som dynamisk positionining en IFRAME (samme størrelse som du PopUp) under popup DIV ... Dette virker også godt, men med en tilføjelse af masser af DOM-elementer, scripts og hovedpine. Jeg har brugt denne løsning også, og hvis du har brug for hjælp med denne indstilling, lad mig det vide. Vil være glad for at hjælpe!

For aldre, har jeg tænkt at konsolidere alle de bedste praksis, har jeg læst alle nu og da. Endelig! Jeg fik ned for at sætte det til pen. Jeg indså, at det bliver kæmpeopgave at skabe denne mammut dokument, så jeg besluttede at dedikere en hel kategori til det, så jeg kunne holde tilføje ting om bedste praksis, som og når jeg støder på dem ...

Nå! indholdet her vil være en sammensmeltning af mine personlige UI udvikling Best Practices med dem, skrevet af standard udviklere som Yahoo, Google etc.

Se dette rum og holde browing den bedste praksis kategori

En CSS Reset / er CSS at sætte en række element stilarter til en bestemt baseline, der skaber sammenhæng på tværs af forskellige browsere.

Vi har alle været gennem mareridt for at skrive cross-browser CSS har. Så når vi begynde at skrive vores CSS, Det er en praksis for at nulstille det først at fjerne / nulstille alle cross browser uoverensstemmelser. CSS Nulstiller, er enkle par linjer af CSS, som du begynder din CSS med, giver dig en ren base for at begynde at bygge din på.

CSS nulstiller, at jeg normalt har en tendens til at bruge ser sådan ud

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;
}

Nulstil browseren skriftstørrelse
Bemærk også den nulstilling, der er blevet anvendt til browser skriftstørrelse i den følgende linje ...

html {font-size: 76%;}

Ovenstående CSS nulstiller browseren skriftstørrelsen til 10 pixel, og det gør det muligt at arbejde med relative skriftstørrelser (som er alle vigtige ud fra et WAI overholdelse prespective)
For eksempel, i det følgende definition font-size i en span sat til 10 pixels, og at i paragarph er sat til 14 pixels ...

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