L'exprimer

À plusieurs reprises, tout en faisant des mises en page avec les divisions Popup / visionneuses ou Conseils etc, nous rencontrons des situations où certains objets de formulaire SELECT se trouve être en vertu de ces divisions POPUP, de par leur conception et il montre à travers .... Berk!

Eh bien! vous pourriez facilement résoudre ce en ajustant vos valeurs de z-index de façon appropriée pour FF et IE7. Mais Good Old (pun intended) IE6 ne se comporte pas comme prévu .... Le spectacle BOX SELECT travers, même après avoir appliqué de façon drastique certaines hautes valeurs de z-index de votre division PopUp ... Bummer!!

Il n'ya pas de solution pour ce problème, mais il ya, je crois, plus que d'une manière quelques-uns à travailler-contourner ce problème, Mais Im ici pour vous dire la solution la plus simple que j'utilise, qui fonctionne très bien pour moi, dans la plupart des cas ....

"Cacher la boîte ROUGE SELECT Lorsque vous affichez la POPUP"

Tout simplement dans votre extrait de script où vous montrez votre popup, ajouter un morceau de script pour définir la visibilité de la boîte de SELECT pour "Caché"

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

Et n'oubliez pas de le remettre sur CLOSE de votre division PopUp

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

où "my_select" est l'ID de la boîte de l'irritation SELECT

Hope this helps ...

PS. Il ya d'autres options comme ofcourse dynamiquement positionining un IFRAME (même taille que vous PopUp) en vertu de la DIV Popup ... Cela fonctionne bien aussi, mais avec une addition de charges d'éléments DOM, des scripts et maux de tête. J'ai utilisé cette solution trop, et si vous avez besoin d'aide pour cette option, ne faites le moi savoir. Se fera un plaisir de vous aider!

Pour les enfants, j'ai penser à consolider toutes les meilleures pratiques, j'ai lu tous les temps en temps. Enfin! Je n'ai descendre pour le mettre à la plume. J'ai réalisé que ça va être la tâche gigantesque de créer ce document mammouth, alors j'ai décidé de consacrer toute une catégorie à elle, afin que je puisse continuer à ajouter des choses sur les meilleures pratiques au fur et à i les rencontrer ...

Eh bien! le contenu ici sera une fusion de mes personnels pratiques de développement d'interface utilisateur les meilleures à celles écrites par les développeurs standard comme Yahoo, Google etc

Surveillez cet espace et de garder l'Browing Meilleur Catégorie pratiques

Un Reset CSS est / sont les CSS pour définir un certain nombre de styles d'élément à un niveau de référence spécifique qui crée la cohérence entre les différents navigateurs.

Nous avons tous été à travers les cauchemars de l'écriture cross-browser CSS. Ainsi, lorsque nous commencer à écrire notre CSS, Il s'agit d'une pratique pour réinitialiser d'abord de supprimer / réinitialiser toutes les incohérences Croix-navigateur. Réinitialise CSS, sont de simples quelques lignes de CSS que vous commencez votre CSS avec, en vous donnant une base propre pour commencer à construire votre sur.

Le CSS que je réinitialise normalement ont tendance à utiliser ressemble à ceci

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

Réinitialiser la taille de police navigateur
A noter également la remise à zéro qui a été appliquée à la taille de police du navigateur dans la ligne suivante ...

html {font-size: 76%;}

Le réinitialise ci-dessus la taille de police CSS navigateur à 10 pixels, ce qui rend possible de travailler avec les tailles de police relatives (qui est tout à partir d'une importante respect WAI prespective)
Pour exemple, dans la définition suivante, font-size dans une travée est fixée à 10 pixels et que dans le paragarph est fixé à 14 pixels ...

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