Resizable : little problem with IE 7
this is my code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript" src="./lib/jquery/jquery.js">
</script>
<script type="text/javascript" src="./lib/jquery/ui.core.js">
</script>
<script type="text/javascript" src="./lib/jquery/
ui.resizable.js">
</script>
<style type="text/css">
<!--
html, body {
overflow-y: hidden;
margin: 0;
padding: 0;
}
body, div {
font-size: small;
font-family: 'lucida grande', helvetica, verdana, arial,
sans-serif;
}
p {
margin: 0 0 1em 0;
}
h1 {
margin: 0;
} #global {
overflow: hidden;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #f7fafd;
} #header {
position: absolute;
top: 0px;
width: 100%;
height: 100px;
} #wrap {
position: absolute;
top: 100px;
bottom: 0px;
width: 100%;
} #sidebar {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
} #sidebar p {
margin-left: 1em;
} #sidebar ul {
margin: 0 0 1em 0;
} #sidebar li {
list-style-type: none;
margin: 0 0 0 1em;
} #sidebar li a {
text-decoration: none;
} #sidebar li a:hover {
text-decoration: underline;
} #contenu {
overflow: auto;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
background-color: #f7fafd;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#sidebar").width($("#sidebar").width() + 20 +
"px");
$("#contenu").css("margin-left", $("#sidebar").width()
+ "px");
$("#sidebar").resizable({
maxWidth: 400,
handles: "e",
resize: function(e, ui){
$("#contenu").css("margin-left", ui.size.width
+ 1 + "px");
}
});
});
</script>
</head>
<body>
<div id="global">
<div id="header">
<h1>en-tête de page</h1>
</div>
<div id="wrap">
<div id="sidebar">
Ma sidebar
<ul id="menu">
<li>
<a href="#">lien1</a>
</li>
<li>
<a href="#">lien2</a>
</li>
<li>
<a href="#">lien3</a>
</li>
<li>
<a href="#">lien4</a>
</li>
</ul>
</div>
<div id="contenu">
</div>
</div>
</div>
</body>
</html>
when i resize the left div (sidebar), the content disapear during the
resize on IE7
if someone have an idea ???
Thanks