Problem with DIV height

115

New Member

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

Apr 2 '09 #3

David Laakso

397

Recognized Expert Contributor

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.

Apr 3 '09 #4

115

New Member

@David Laakso

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

Expand|Select|Wrap|Line Numbers

 <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

Apr 3 '09 #5

7,435

Recognized Expert Expert

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.

Apr 3 '09 #6

115

New Member

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

Apr 6 '09 #7

7,435

Recognized Expert Expert

Probably the worst solution ever but....

Apr 6 '09 #8

115

New Member

@drhowarddrfine
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

Expand|Select|Wrap|Line Numbers

 <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>

Apr 7 '09 #9

7,435

Recognized Expert Expert

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:relative' would have solved the problem.

Apr 7 '09 #10

115

New Member

@drhowarddrfine
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

Apr 7 '09 #11

7,435

Recognized Expert Expert

@maliksleo
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.

Apr 7 '09 #12

ASP / Active Server Pages

115

New Member

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

thanks
maliksleo

Apr 8 '09 #13

Similar topics

533

problem

by: Mikael Hellström | last post by:

Hi all... I hava a problem . This pice of code (menu) works well with ie but don't work with netscape 6.2 .. why? Please tell me how i can get this to work. My site have the adress...

3814

javascript toolbar-menu problem

by: JesusFreak | last post by:

From: us_traveller@yahoo.com (JesusFreak) Newsgroups: microsoft.public.scripting.jscript Subject: toolbar script problem NNTP-Posting-Host: 192.92.126.136 Recently, I downloaded the following...

Javascript

2687

problem with my DIV-based box model

by: B McDonald | last post by:

Hi. I am trying to straighten out some DIV issues in the rendering of my no-tables CSS website. Right now the biggest issue is trying to render 2 columns several DIVs deep in the box model for my...

Mozilla spacing/padding problem

5618

by: delerious | last post by:

Could someone please take a look at this page: http://home.comcast.net/~delerious1/index11.html The set of links on the left should not have any whitespace between them, and the set of links...

Absolute Positioning within Table Cell Alignment Problem in FireFox (Mozilla)

1497

Table formatting problem

by: Thomas Scheiderich | last post by:

I have a table that has 3 image slices. The middle slice changes size based on size of browser window. This works great. My client wants the date to show over the image on the right. So what I...

ASP.NET

16393

by: nino9stars | last post by:

Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...

problem with master pages, solution plz

1420

by: kchaitanya | last post by:

I have created a master page. When I am adding this master page to .aspx files which are in the root directory, it is working fine. When , I am adding master page to .aspx files which are in sub...

.NET Framework

1876

Problem in layout of website

by: creative1 | last post by:

hi everyone, I am struck in layout of my site. Im using 1024 fixed width layout. I have a site layout designed in psd files. Bisically I have to stick with that design tightly and I am asked not to...