Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSSHTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 <style type="text/css">
        .box
        {
            background-color:Gray;
            width:300px;
            height:400px;
            position:relative;
            padding-top : 50px;
            padding-bottom : 50px;
            padding-left : 50px;
            padding-right : 50px;
        }
        
        fieldset
        {
            border-color : Red;
            width : 50% !important;
            padding-top : 50px;
            padding-bottom : 50px;
            padding-left : 50px;
            padding-right : 50px;
        }
 </style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#resizable").resizable();
    });
</script>
</head>
<body>
<fieldset id="fdemo">
<div id="resizable" style="width: 100px; height: 100px;" class='box'></div>
</fieldset>
</body>
</html>
 
Attached above is the html code with a fieldset and a resizable div within the fieldset.
 
My user can resize the div to any width he wishes. In my real application I have other elements that resize. So this is just a relating demo.
In case my user resizes a control (in this case the div within the fieldset) to a width greater than the width of the fieldset, the width of the fieldset should increase so that the div is contained within the bounds of the fieldset.
 
When you execute the above code and put IE8 or IE9 in quirks mode, you will notice that the desired behaviour is achieved, the fieldset's width increases and the div is contained within the fieldset.
 
However when the document goes into standard mode(i.e. IE8 standard mode or IE9 standard mode), resizing of the div does not resize the fieldset. The fieldset stays as it is and the div moves over and out of the fieldset.
 
I am unable to understand why this is occuring and am not aware of availablity or unavailability of any property that could cause this issue to occur.
 
I need a solution that would allow the above to work on IE7, IE8 and IE9.
 
Any help would be appreciated.
 
Thanks in Advance.
Posted 10-May-12 1:34am
Edited 10-May-12 2:40am
v2
Comments
SAKryukov at 10-May-12 16:11pm
   
It it intended that when an inner content width gets smaller then some value, outer (red) border stops re-sizing, but its width can grow (in contrast to height which always follow the inner element width)? If so, it all works good (I use Mozilla Seamonkey). And IE sucks. That's a pity. --SA
SAKryukov at 10-May-12 16:12pm
   
I voted 5 for the question. Good code, reasonable question. --SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Sergey Alexandrovich Kryukov 457
1 OriginalGriff 430
2 Shai Vashdi 240
3 Emre Ataseven 165
4 Peter Leow 146
0 Sergey Alexandrovich Kryukov 8,944
1 OriginalGriff 5,280
2 Peter Leow 3,985
3 Maciej Los 3,535
4 Abhinav S 3,218


Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 10 May 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid