Problem with DIV height

**David Laakso** · Apr 1 '09, 01:31 PM

Point us to it. State your OS and browser(s).

**maliksleo** · Apr 2 '09, 04:33 AM

Originally posted by David Laakso

Point us to it. State your OS and browser(s).

im using windows XP and my browsers are IE 7 and Firefox the problem is being faced in both

**David Laakso** · Apr 3 '09, 06:01 AM

No Ticky. No Shirt.

Point us to it. In plain English, provide a clickable link to the problem page in your post to the forum. Can't fix what can't be seen.

**maliksleo** · Apr 3 '09, 10:25 AM

Originally posted by David Laakso

No Ticky. No Shirt.

Point us to it. In plain English, provide a clickable link to the problem page in your post to the forum. Can't fix what can't be seen.

My work is not available at internet yet so i cant show it to you but i m sending you the code below and i m very thankful to you for your kind consideration.

this is my progress bar

Code:

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
        <progresstemplate>
    <div style="width: 130%; height: 175%; background-color:#999999; filter:alpha(opacity=85); opacity:0.7; position:absolute; left:-15%; top:0; text-align:center; vertical-align:middle">
       <img src="images/progress.gif" style="margin-top:32%" />
    </div>
    </progresstemplate>
    </asp:UpdateProgress>

as my page ends in the midle of the screen thats why i give height 175% for IE
but it acts different in firefox, in firefox the hight of div tag is 175% of screen area

is this code in enough for you?

regards maliksleo

**drhowarddrfine** · Apr 3 '09, 12:18 PM

Most people do not use ASP or .NET so you must supply the generated markup for us to help.

Percentages are relative to something else. In this case, it would be the parent element. If you set something to, say, 50%, then it's 50% of what? The parent element. But what is the parent set to?

Ignore what IE is doing since it's probably wrong. Follow FF while you're testing this.

**maliksleo** · Apr 6 '09, 06:05 AM

Solved

Thanks to all for your help

my problem is solved i just changed the position from absolute to fixed and its working great in IE and FF

maliksleo

**drhowarddrfine** · Apr 6 '09, 01:46 PM

Probably the worst solution ever but....

**maliksleo** · Apr 7 '09, 06:04 AM

Originally posted by drhowarddrfine

Probably the worst solution ever but....

Thanks for your comliment but as for a beginer i think its not worst if u have any other solution then give it to me my markup is generated below

Code:

<body>

    <form name="aspnetForm" method="post" action="register.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDQ2NDEwNDc5D2QWAmYPZBYCAgMPZBYGAgcPDxYCHgRUZXh0BQpqb2Igc2Vla2VyZGQCCQ8PFgIfAAUFbG9naW5kZAITD2QWBgIVDxAPFgIeC18hRGF0YUJvdW5kZ2QQFQQHQWZnaGFuaQhFZ3lwdGlhbglQYWtpc3RhbmkGU2VsZWN0FQQHQWZnaGFuaQhFZ3lwdGlhbglQYWtpc3RhbmkGU2VsZWN0FCsDBGdnZ2dkZAIhD2QWAmYPZBYGAgIPEA8WAh8BZ2QQFRUMIEFmZ2hhbmlzdGFuCCBCYWxnaXVtCyBCYW5nbGFkZXNoByBDYW5hZGEGIENoaW5hByBGcmFuY2UGIEluZGlhBSBJcmFuBiBOZXBhbAkgUGFraXN0YW4TIFJ1c3NpYW4gRmVkZXJhdGlvbg0gU2F1ZGkgQXJhYmlhDSBTb3V0aCBBZnJpY2EKIFNyaSBMYW5rYQYgU3VkYW4HIFR1cmtleRUgVW5pdGVkIEFyYWIgRW1pcmF0ZXMPIFVuaXRlZCBLaW5nZG9tDiBVbml0ZWQgU3RhdGVzBW90aGVyBlNlbGVjdBUVDCBBZmdoYW5pc3RhbgggQmFsZ2l1bQsgQmFuZ2xhZGVzaAcgQ2FuYWRhBiBDaGluYQcgRnJhbmNlBiBJbmRpYQUgSXJhbgYgTmVwYWwJIFBha2lzdGFuEyBSdXNzaWFuIEZlZGVyYXRpb24NIFNhdWRpIEFyYWJpYQ0gU291dGggQWZyaWNhCiBTcmkgTGFua2EGIFN1ZGFuByBUdXJrZXkVIFVuaXRlZCBBcmFiIEVtaXJhdGVzDyBVbml0ZWQgS2luZ2RvbQ4gVW5pdGVkIFN0YXRlcwVvdGhlcgZTZWxlY3QUKwMVZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZGQCBw8QDxYCHwFnZBAVAQZTZWxlY3QVAQZTZWxlY3QUKwMBZ2RkAggPD2QPEBYBZhYBFgIeDlBhcmFtZXRlclZhbHVlBQZTZWxlY3QWAWZkZAIqDxAPFgIfAWdkEBUMCEF1ZGl0aW5nEUNpdmlsIEVuZ2VuaWVyaW5nB0ZpbmFuY2UOSHVtYW4gUmVzb3VyY2ULSVQtSGFyZHdhcmULSVQtU29mdHdhcmUJTWFya2V0aW5nB01lZGljYWwKTmV0d29ya2luZwZTZWxlY3QQVGVsZWNvbXVuaWNhdGlvbg5Ub3AgTWFuYWdlbWVudBUMCEF1ZGl0aW5nEUNpdmlsIEVuZ2VuaWVyaW5nB0ZpbmFuY2UOSHVtYW4gUmVzb3VyY2ULSVQtSGFyZHdhcmULSVQtU29mdHdhcmUJTWFya2V0aW5nB01lZGljYWwKTmV0d29ya2luZwZTZWxlY3QQVGVsZWNvbXVuaWNhdGlvbg5Ub3AgTWFuYWdlbWVudBQrAwxnZ2dnZ2dnZ2dnZ2dkZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAQUSY3RsMDAkSW1hZ2VCdXR0b24xF2K3YjVbHrs/7GrpOGGOsXURkpM=" />
</div>

<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
// -->
</script>



<script type="text/javascript">
<!--
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
// -->
</script>

    <div id="process">
        <div style="text-align: center">

            <div style="text-align: center; background-color: transparent;">
            <h3>
                <table style="height:auto; vertical-align:top; margin-left: 10%; margin-right: 10%; position: absolute; top: 0px; left: 0px;" width="80%">
                    <tr>
                        <td class="bgcolor" style="width: 100%; text-align: left; background-color: #e9f2f8;">
                            <a id="ctl00_HyperLink1">Home</a>
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

                            <a id="ctl00_HyperLink2" href="mailto:maliksleo@gmail.com?subject=error:">Report Bug</a></td>
                    </tr>
                    <tr>
                        <td style="width: 100%; text-align: left; vertical-align: top;" class="bgcolor" height="auto">
                            <table style="width: 100%">
                                <tr>
                                    <td style="width: 33%">
                            <input type="image" name="ctl00$ImageButton1" id="ctl00_ImageButton1" src="images/bannerpic.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ImageButton1&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" style="border-width:0px;position: static;" /></td>

                                    <td style="width: 33%; text-align: center">
                                        Welcome<br />
                                        <span id="ctl00_Label1">job seeker</span><br />
                                        <a id="ctl00_lbtnlogout" href="javascript:__doPostBack('ctl00$lbtnlogout','')">login</a>
                                        <span style="color: #0000ff">
                                            <a id="ctl00_lbtnreg" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$lbtnreg&quot;, &quot;&quot;, false, &quot;&quot;, &quot;register.aspx&quot;, false, true))">Register</a></span></td>
                                    <td style="vertical-align: top; width: 33%; text-align: right">

                                        </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100%; text-align: center">
                            <div style="text-align: center; width:auto">
                            </div>

                            
                            <div id="ctl00_Panel2" class="btncolor" style="width:100%;">
	
                                            links removed
</div>
                        </td>
                    </tr>

                    <tr>
                        <td style="width: 100%; height: 7px" class="bgcolor">
                            
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ContentPlaceHolder2$ScriptManager1', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tctl00$ContentPlaceHolder1$UpdatePanel1','tctl00$ContentPlaceHolder1$UpdatePanel2'], [], [], 90);
//]]>
</script>

    <div id="ctl00_ContentPlaceHolder2_UpdateProgress1" style="display:none;">
	
            <div style="width: 100%; height: 100%; background-color: #999999; filter: alpha(opacity=85);
                opacity: 0.7; position:fixed; left: 0px; top: 0px; bottom:0px; right:0px; text-align: center; vertical-align: middle; z-index:100">
                <img src="images/process.gif" style="margin-top: 32%" />
            </div>

**drhowarddrfine** · Apr 7 '09, 11:53 AM

My complaint is using 'fixed' is a hack and not a solution. The problem probably was that, when you use absolute positioning, it places the element relative to the previous positioned element, but there is no previously positioned element. Simply making the parent of that div 'position:relat ive' would have solved the problem.

**maliksleo** · Apr 7 '09, 12:45 PM

Originally posted by drhowarddrfine

My complaint is using 'fixed' is a hack and not a solution. The problem probably was that, when you use absolute positioning, it places the element relative to the previous positioned element, but there is no previously positioned element. Simply making the parent of that div 'position:relat ive' would have solved the problem.

now i got your point that if relative position is selected then it will be relevent to the parent div or td or any such tag before it and in case of fixed it will be fixed and relevency issue will not matter.
one more thing is there any problem of using fixed or its just fine in my case? as i m using master pages and i dont know which div will be acting as parent while page is running.

thanks for your help "drhowarddrfine "
maliksleo

**drhowarddrfine** · Apr 7 '09, 04:46 PM

Originally posted by maliksleo

now i got your point

Exactly.

one more thing is there any problem of using fixed or its just fine in my case?

'fixed' does not work in IE<7 and is buggy in IE7+. Fixed is relative to the viewport and not any one element and, otherwise, behaves like an absolutely positioned element.

**maliksleo** · Apr 8 '09, 04:20 AM

thanks alot for guiding me in this matter i m realy thankfull

thanks
maliksleo

Problem with DIV height

Problem with DIV height

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment