Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS HTML
<!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 2:34am
Edited 10-May-12 3:40am
(no name)498.6K
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
0 OriginalGriff 495
1 Maciej Los 340
2 Richard MacCutchan 265
3 BillWoodruff 225
4 Mathew Soji 200
0 OriginalGriff 8,804
1 Sergey Alexandrovich Kryukov 7,457
2 DamithSL 5,689
3 Maciej Los 5,279
4 Manas Bhardwaj 4,986


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

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100