html - IE7 - using a div to mask a select - select's height is being ignored, the dropdown's position is too high, over the text -


i use div mask, set position absolute , z-index 1. on it, using z-index 2 , position relative, have placed select.

i'm struggling code in ie7, basically, ie7 ignores height of select - moving dropdown list high, on mask's text.

here fiddle.

<div class="select-container">     <div class="mask">this mask</div>     <select>         <option>please select</option>         <option>option 1</option>         <option>option 2</option>         <option>option 3</option>     </select> </div><!-- /select_container -->   .mask {     height: 32px;     width: 200px;     line-height: 30px;     padding-left: 10px;     position: absolute;     z-index: 1;     border: 1px solid grey }  .select-container select {     height: 34px;     width: 212px;     position: relative;     z-index: 2;     top: 0;     opacity: -1;     filter: alpha(opacity:-1); } 

sadly, select elements don't accept set heights in ie7 (and various other browsers / versions). here's similar previous question. best bet use else.


Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

javascript - Clean way to programmatically use CSS transitions from JS? -

android - send complex objects as post php java -