#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Posts
    2
    Rep Power
    0

    IE 5.5/6.0 DHTML Limitation... Help?


    Has anyone found a way to resize a div tag smaller than 19px in IE 5.5 or 6.0? The following code works perfectly in Netscape 6.2.3 but reaches a display limitation in IE 5.5 and 6.0:

    ***************Begin HTML*************************

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
    <html>
    <head>
    <SCRIPT>
    var tempObj;
    var tempObj2;
    var tempObj3;
    var PrevHeight;
    var newHeight;
    var HeightIncr = 1;
    var HeightUnit = "px";


    function scaleUp(){

    tempObj=document.getElementById('tstDiv');
    tempObj2=document.getElementById('divHeight');
    tempObj3=document.getElementById('actualDivHeight');
    PrevHeight = tempObj.style.height;
    PrevHeight=Number(PrevHeight.slice(0,(PrevHeight.length - 2)));
    newHeight = PrevHeight+HeightIncr;
    tempObj2.value=newHeight+HeightUnit;
    tempObj.style.height=newHeight+HeightUnit;
    tempObj3.value=tempObj.style.height;
    }
    function scaleDown(){
    tempObj=document.getElementById('tstDiv');
    tempObj2=document.getElementById('divHeight');
    tempObj3=document.getElementById('actualDivHeight');
    PrevHeight = tempObj.style.height;
    PrevHeight=Number(PrevHeight.slice(0,(PrevHeight.length - 2)));
    newHeight = PrevHeight-HeightIncr;
    tempObj2.value=newHeight+HeightUnit;
    tempObj.style.height=newHeight+HeightUnit;
    tempObj3.value=tempObj.style.height;
    }

    </SCRIPT>
    </head>
    <body>
    <div id="tstDiv" style="height: 20px; width: 350px; left: 10px; background-color: #D8E8F5; position: absolute; top: 320px; z-index: 1;">
    &nbsp;
    </div>
    <input type="button" value="Increase Height" onclick="scaleUp();" style="width: 100; left: 10px; ">
    <input type="button" value="Decrease Height" onclick="scaleDown();" style="width: 100; left: 10px; "><br>
    Setting Height To:<input id="divHeight" type="text" name="divHeight" value=""><br>
    Actual Height:<input id="actualDivHeight" type="text" name="actualDivHeight" value="">

    </body>
    </html>

    ************************END HTML********************

    Once the div height reaches 19px, the display stops updating even though querying the obj.height returns a smaller number.

    Is there a way around this?
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    overflow:hidden;

    Some sort of bug, one of a number of IE-oddities in correctly rendering height & width.

    http://www.richinstyle.com/bugs/ie5b.html#width

    btw: PrevHeight = parseInt(tempObj.style.height);
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Posts
    2
    Rep Power
    0
    Thank you.... That worked like a charm (but you knew that already)

IMN logo majestic logo threadwatch logo seochat tools logo