Problems using resizable grid
I'm having problems with using resizable({grid[]}). The follow code
works well in Firefox but not in IE 7. Was hoping someone could
provide some insight see if I'm doing something wrong.
//The Javascript
$(document).ready(function(){
$(".block").click(function(){
$(this).html('<div class="example">x</div>');
$(this).children(".example").resizable({grid:[0, 22]});
});
});
//The css
.block{border:solid 1px black;
width: 139px;
height: 20px;
margin:0px;
text-align: center;}
.example{
border: solid 1px #006;
background-color: red;
opacity: .5;
width: 139px;
height: 20px;
}
// the html
<div id="frame">
<div id="1" class="block"></div>
<div id="2" class="block"></div>
<div id="3" class="block"></div>
<div id="4" class="block"></div>
<div id="5" class="block"></div>
<div id="6" class="block"></div>
<div id="7" class="block"></div>
</div>
Any sight would be helpful and thank you in advance
Scott