problem with div height when adding childs

[omerbutt]

hi tere i have a page in which i have the requirement that the client has 2 select (Length,Weight)and 1 text(Quantity) inputs and 2 buttons (add and remove) the idea is that the client should enter some number in the quantity field and hit the add button and he could add another row with the same fields and then he could again enter the quantity and so on , i have done all this successfully ,in FF when i add row another row appears under it and then another and so on but the problem is in IE it do adds a new row but the height of the div does not increase accordingly it shows only the first two div and how many rows i may add it wont give me any error but does not show me even anything atall
i am posting my code here and a working sample http://www.myrage.biz/custom_order.php
the HTML CODE

<input type="hidden" name="rows_t" id="rows_t" value="1" /><input type="hidden" name="myid" id="myid" value="<?=$myid;?>" />
<table cellspacing="0" cellpadding="0" align="left" width="400" border="0">
    <tr><td class="tdheight_11"></td></tr>
    <tr>
        <td align="left" valign="top" width="400">
            <div id="specs_1">
                <table cellspacing="0" cellpadding="0" align="center" width="400" border="0">
                    <tr>
                        <td align="left" valign="middle" class="text_grey_12_b_b" width="125">Length:<br />
                            <span>
                                <select name="prod_length_1" id="prod_length_1" class="text_grey_12_b_b" style="width:100px;">
                                <option value="36.5">36.5"</option>
                                <option value="37">37"</option>
                                <option value="37.5">37.5"</option>
                                <option value="37">38"</option>
                                </select>
                            </span>
                        </td>
                        <td>&nbsp;</td>
                        <td align="left" valign="middle" class="text_grey_12_b_b" width="125">Weight:<br />
                            <span>
                                <select name="prod_weight_1" id="prod_weight_1" class="text_grey_12_b_b" style="width:100px;">
                                <option value="Light">Light</option>
                                <option value="Medium">Medium</option>
                                <option value="Heavy">Heavy</option>
                                </select>
                            </span>
                        </td>
                        <td>&nbsp;</td>
                        <td align="left" valign="middle" class="text_grey_12_b_b" width="125">Quantity:<br /><span><input type="text" name="prod_qty_1" id="prod_qty_1" value="" class="textfield_reg_grey" style="width:50px; height:15px;" /></span></td>
                        <td>&nbsp;</td>
                        <td align="left" valign="bottom" class="text_grey_12_b" width="125">
                            <span id="adder_1" style="display:inline;"><input type="button" name="addrow_1" id="addrow_1" value="Add Row" onclick="AddRow('1');" class="add" style="border:0px; cursor:pointer;" /></span>
                            <div id="deller_1" style="display:none;"><input type="button" name="delrow_1" id="delrow_1" value="" onclick="DelRow('1');" class="delete" style="border:0px; cursor:pointer;" /></div>
                        </td>
                    </tr>
            </table>
        </div>
    </td>
</tr>
<tr><td align="left" valign="middle" width="925" colspan="2"><div id="specs_div"></div></td></tr>
<tr><td class="tdheight_11"></td></tr>
</table>
 

THE Javascript

function AddRow(row){
        if(document.getElementById("prod_qty_"+row).value!=""){
            if(chkNumeric(document.getElementById("prod_qty_"+row).value)){
                ObjxmlAdd=GetXmlHttpObject();
                if(ObjxmlAdd==null){
                    alert("You need to upgrade your Browser");
                    return;
                }else{
                    ObjxmlAdd.onreadystatechange=$row_;
                    ObjxmlAdd.open("GET","ajax/custom_addrow.php?specid="+Math.random()+"&row="+row,true);
                    ObjxmlAdd.send(null);
                    document.getElementById("adder_"+row).style.display='none';
                    document.getElementById("deller_"+row).style.display='inline';
                }
            }else{
                msg_divs('error','300px','280px','400px','400px',"<strong>You must enter a ''Numeric'' value for ''Quantity''</strong>");
            }
        }else{
            msg_divs('error','300px','280px','400px','400px',"<strong>You must enter ''Quantity''</strong>");
            return;
        }
    }
    function chkNumeric(str){//  check for valid numeric strings
        var strValidChars = "0123456789";
        var strChar;
        var blnResult = true;
        if (str.length == 0){
            return false;
        }
        for (i = 0; i < str.length && blnResult == true; i++){//  test strString consists of valid characters listed above
            strChar = str.charAt(i);
            if (strValidChars.indexOf(strChar) == -1){
                blnResult = false;
            }
        }
        return blnResult;
    }
    function $row_(){
        if(ObjxmlAdd.readyState==4){
            if(ObjxmlAdd.status==200){
                var ni = document.getElementById('specs_div');
                var numi = document.getElementById('rows_t');
                var num = (document.getElementById('rows_t').value -1)+ 2;
                numi.value = num;
                var resdiv = document.createElement('div');
                var divIdName = 'specs_'+num;
                resdiv.setAttribute('id',divIdName);
                resdiv.innerHTML = ObjxmlAdd.responseText;
                ni.appendChild(resdiv);
            }
        }
    }
    function DelRow(row){
        if(row==1){
            document.getElementById("specs_1").innerHTML="";
        }else{
            var d = document.getElementById('specs_div');
            var divname ='specs_'+row;
            var olddiv =document.getElementById(divname);
            d.removeChild(olddiv);
        }
        var rows_left=parseInt(document.getElementById("rows_t").value);
        rows_left=rows_left-1;
        document.getElementById("rows_t").value=rows_left;
    }
 

thanks for any help in advance,
Ragards,
Omer Aslam

[Ferris]

Hi
I test your code in firefox and IE, it's ok. The div will increased it's height automatically. Of cause,I removed your ajax code.
So I think the problem is in the ajax return value : ObjxmlAdd.responseText; ( JS file,line 48).

would you please post the return value of ObjxmlAdd.responseText?

Regards.

[omerbutt]

Hi
I test your code in firefox and IE, it's ok. The div will increased it's height automatically. Of cause,I removed your ajax code.
So I think the problem is in the ajax return value : ObjxmlAdd.responseText; ( JS file,line 48).

would you please post the return value of ObjxmlAdd.responseText?

Regards.

are you sure that you have watched the output in IE6 and it is ok ,...means have you tried to add more than 2 rows and are they visible to you ....

[Ferris]

Hi

I think I have found what the problem is. The reason why you can't see new line is the new line displayed behind the 1st line, not below the 1st line.

I guess ObjxmlAdd.responseText will return a Table HTML code,and you set the table's align attribute.This is why the div will showed behind,not below.

for example:

the wrong code:

<div id="specs_div">
    <div id="specs_1">
        <table align="left" id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
    <div id="specs_2">
        <table align="left" id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
</div>
 

the right code:(remove align='left' in table)

<div id="specs_div">
    <div id="specs_1">
        <table id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
    <div id="specs_2">
        <table id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
</div>
 

I upload my test code for you. Pay attention to line 66. 2 files included,One is working in IE, the other's not.

Hope it helps.

Regards.

[omerbutt]

Hi

I think I have found what the problem is. The reason why you can't see new line is the new line displayed behind the 1st line, not below the 1st line.

I guess ObjxmlAdd.responseText will return a Table HTML code,and you set the table's align attribute.This is why the div will showed behind,not below.

for example:

the wrong code:

<div id="specs_div">
    <div id="specs_1">
        <table align="left" id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
    <div id="specs_2">
        <table align="left" id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
</div>
 

the right code:(remove align='left' in table)

<div id="specs_div">
    <div id="specs_1">
        <table id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
    <div id="specs_2">
        <table id="the_code_returned_by_ObjxmlAdd">
            <tr><td>some code</td></tr>
        </table>
    </div>
</div>
 

I upload my test code for you. Pay attention to line 66. 2 files included,One is working in IE, the other's not.

Hope it helps.

Regards.

ofcourse it is going to be it you are exactly right about that the div is not populating UNDERit is being populated behind it ;) thanks a ton Ferris iwas about to lost my all hair on this issue some times you overlook these things and same was the case here
regards,
Omer Aslam