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
Post a Comment