Expresa-la

En varias ocasións, ao facer esquemas de páxinas con divisións emerxente / lightboxes / consellos etc nos atopamos con situacións nas que algúns obxectos de formulario Select pasa a ser baixo estas divisións emerxente, polo proxecto e mostra a través de .... Yuk!

Ben! pode facilmente corrixir isto axustando os seus Z-index valores axeitadamente para FF e IE7. Pero Good Old (xogo de palabras intencionado) IE6 non comportarse conforme o esperado .... O show BOX SELECT a través de, mesmo despois de aplicar algúns drasticamente altos Z-index valores para a súa División de xanelas emerxentes ... Bummer!

Non existen solucións a este problema, pero hai, creo eu, máis dun xeito que poucos a traballar en torno a este problema, pero estou aquí para dicir-lle a solución máis simple que eu uso, que funciona ben para min, na maior parte do casos ....

"Ocultar o Rouge caixa SELECT cando amosa a Emerxente"

Simplemente no seu tramo de guión onde amosar o seu pop-up, engade unha peza de script para definir a visibilidade da caixa de verificación para "hidden"

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

E lembre de configurar-lo de volta o próximo da súa División de xanelas emerxentes

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

onde "my_select" é o ID do cadro de irritación seleccionar

Espero que isto axude ...

PS. Existen outras opcións como ofcourse dinámica positionining un IFRAME (mesmo tamaño que emerxente), baixo a DIV Emerxente ... Isto funciona moi ben, pero con un engadido de carga de elementos DOM, scripts e dor de cabeza. Eu teño usado esa solución tamén, e se precisa de axuda con esta opción, deixe-me saber. Será un pracer axudar!

Por idades, teño que pensar para consolidar todas as prácticas, fun ler de cando en vez. Finalmente! Eu tiven ata poñelo a pluma. Podo entender que vai ser tarefa xigantesca de crear este documento mamut, entón eu decidir dedicar toda unha categoría para el, para que eu puidese continuar a engadir cousas sobre as mellores prácticas de como e cando atopalos ...

Ben! o contido aquí será unha amálgama das miñas prácticas UI persoais mellores desenvolvemento con aqueles escritos polos desenvolvedores do estándar, como Yahoo, Google etc etc

Assist a este espazo e manter browing a mellor categoría Prácticas

A redefinición CSS é / son CSS para definir un número de estilos de elementos para unha liña de base específica que crea consistencia entre varios navegadores.

Todos nós fomos a través dos pesadelos de escribir CSS cross-browser do. Entón, cando comezamos a escribir o noso CSS, é unha práctica para redefini-la primeiro para eliminar / redefinir as inconsistencia cross navegador. Redefine CSS, son simples liñas de CSS que comeza o seu CSS con, dándolle unha base limpa para empezar a construír o seu enriba.

O redefine CSS normalmente tenden a usar esta aparencia

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

ul, ol {
list-style: none;
}

h1, h2, h3, h4, H5, H6 {
font-size: 100%;
font-Weight: normal;
}

Restablecer o tamaño da fonte navegador
Ademais, conta a reposición que foi aplicado ao tamaño do navegador de fonte na liña seguinte ...

html {font-size: 76%;}

O CSS enriba redefine o tamaño da fonte navegador a 10 píxeles, o que fai posible traballar con tamaños de fontes relativos (que é todo importante a partir dun acordo WAI prespective)
Por exemplo, na seguinte definición, tamaño da fonte nun período defínese como 10 píxeles e que na do n ° defínese por 14 píxeles ...

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