I am facing an issue with a div containing form elements and an invisible overlay mask. When using IE 7 and 8, the click goes through the overlay without background which is incorrect.
To solve this problem, I added a background color to the overlay div with 0.1 opacity. However, when working with sortable items in my container, the form elements behave strangely especially during sorting (especially when applying opacity option on jquery sortable).
Example Code:
<div class="sort">
<div class="cont">
<div class="mask"></div>
<label for="test">Test</label>
<input type="text" value="Some" name="test" id="test" />
</div>
<div class="cont">
<div class="mask"></div>
<label for="test">Test</label>
<select value="Some" name="test2" id="test2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
CSS:
.cont {
width: 300px;
position: relative;
background-color: #aaa;
padding: 10px;
margin: 10px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.1;
filter: alpha(opacity=0.1);
}
Javascript:
$(function() {
$('.sort').sortable({opacity:0.8});
});
Check it out live on http://jsfiddle.net/CmU59/4/
Are there any other suggestions for a workaround?