Heya folks! I had a problem with adjusting select elements for cross-browser support between Firefox and Chrome, which seems to be the most popular browsers, and are the two I use. The select element appears to have different top margins between these browsers. I looked through the CSS Wizardry wiki for help on this issue, but found only " :hover pseudo-selectors and radio buttons" as a suggestion. However, after I googled the issue a bit, I found other suggestions, and one that actually worked for me. I'm quite a novice on this, and I'm not sure if others are having this issue, but since this solution worked for me, I decided to share, so here it is: /* First: Set the margin to what works in Firefox */
select{
margin-top: -3px;
}
/* Second: Make sure Firefox is using the correct margin */
@-moz-document url-prefix(){
select{
margin-top: -3px;
}
}
/* Third: Set the margin to what works in Chrome and make sure it's !important */
@media screen and (-webkit-min-device-pixel-ratio:0){
select{
margin-top: 0px !important;
}
}
