This is because of the overflow: hidden you have set for #global. During the resize, it has no height as you've got position: absolute for everything inside it.
- Richard On Tue, Nov 18, 2008 at 4:32 AM, garthos <[EMAIL PROTECTED]> wrote: > > it works !!! but now i have a little problem on IE > > i resize my right div when i resize the left div (with the callback > function) > but the content disapear during the resize on IE 7 > > it's strange ! > > if someone can help me ! > > 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"> > <p> > Ma sidebar > </p> > <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> > > > > > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
