?
Solved

How to display the footer inside the Scrollable div on .aspx page

Posted on 2012-09-19
30
Medium Priority
?
374 Views
Last Modified: 2012-10-19
Hi Rouchie,

You helped me solving this problem before. Now I published the application on Development server.The problem came again.

The footer was outside the Div and alignment and appearance distorted for some of the page where as everything is good on my machine.

Will you help me in finding the reason for this problem.

Thanks
0
Comment
Question by:KavyaVS
  • 15
  • 15
30 Comments
 
LVL 25

Expert Comment

by:Rouchie
ID: 38416715
Can you post the live URL please?  You had problems with other style sheets interfering last time
0
 

Author Comment

by:KavyaVS
ID: 38419522
Hi Rouchie,

Please see the attached files.
For Grab1 we need to fix the Footer issue. The Footer should be after the Horizontal line.It is after the Horizontal line on my machine.
For Grab2 the column headers should not wrap. On my machine Maximum Amount Financed,Auto Pay APR and Coupon Book APR are in single line.

But after publishing it to Dev it is different.

Please advise.

Thanks
Grab1.png
Grab2.png
0
 
LVL 25

Accepted Solution

by:
Rouchie earned 2000 total points
ID: 38420824
Okay I'll need the code then please.  Preferably on the live version (a link is best) so that I can mess about using Firebug to correct it for you.  Is there any reason you are choosing to use a scrollable div to contain the content?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:KavyaVS
ID: 38422130
Hi Rouchie,
Thanks for your response.
The attached files having the live version code for Grab1 and Grab2.

What do you mean by link.I don't have any live link.

Scrollable div is good for users to edit the Grids.
Grab1.aspx
Grab2.aspx
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38427745
Sorry, I need the rendered HTML (using browser file > save page) not the source code.  I can't run your source code on my machine you see.  The live link would have allowed me to view the page in my own browser and look for the CSS problems
0
 

Author Comment

by:KavyaVS
ID: 38429092
Hi Rouchie,
Please find th live link attachments.
After I saved the page as .htm the footer is inside the div after horizontal line. But in the browser as .aspx page it is outside the div.

You can see that in grab1.png

For Grab2.htm the column headers should not wrap. On my machine Maximum Amount Financed,Auto Pay APR and Coupon Book APR are in single line.But after publishing it is not.

Thanks
Grab1.htm
Grab2.htm
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38431615
From the grabs, the footer appears in the correct place for both.  However, two files are not enclosed, these are WebMessages.CSS and 960.CSS
The problem is being caused by a style rule in one of these documents.  If you post them both here I will take a look, otherwise you need to disable all the rules in each sheet, then enable them one-by-one and reload the page until the problem occurs.
Lastly, tales are not the way to approach your design.  Tables are not designed for laying out content like this.  You need to get to grips with learning <div>s and stick with tables only for your numerical figures.
You should not EVER put a Div inside a table TD either.  That might be one of the main issues.
0
 

Author Comment

by:KavyaVS
ID: 38433982
Hi Rouchie,
Thanks for you suggestions.
The footer is displaying properly after commenting position:relative property in .grid_11 css class.Issue 1 solved.

Please look into  Grab2.htm the column headers issue.
I am attaching the Web_Message.css file. On my machine Maximum Amount Financed,Auto Pay APR and Coupon Book APR column headers are in single line.But after publishing it is not.
Can you please look into that.

Please let me know if you need to know anything else.
Web-Messages.css
Grab2.htm
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38435704
The single-line issue is not strictly a fault of yours, but the way tables work within HTML.  When a table is rendered in the browser, the browser adjusts all the columns widths automatically to try and account for the content in every table cell.  Because the content of each table cell can differ slightly, all the widths end up slightly different.  When the browser pulls them all together, you therefore get different looks for what seems like the same table.

The only way to stop this is to specify column widths within the table headers.  Now I see that you've tried this, but it isn't done properly.  Take these two lines from your rendered Grab2.htm

<tr style="WIDTH: 100%;  ........
  <td style="WIDTH: 100%;  ...............
  ........
  </td>
  <td style="WIDTH: 100%;  ...............

Open in new window


Here you are telling the browser to stretch EVERY column to 100% of the available table width.  Then, you are telling the browser to stretch EVERY cell to the full width of the table.  Both rules are impossible because if there is more than one column, neither can occupy more than 100% of the space available.  The same rule applies for the cells.
Also the same logic applies to the HEIGHT property.

So, you need to remove ALL of the WIDTH and HEIGHT rules for <TableRow> and <TableCell> elements.  So....

 <asp:TableRow VerticalAlign="Middle" Width="100%" Height="100%">
<asp:TableCell Width="100%" Height="100%">

Open in new window


becomes

 <asp:TableRow VerticalAlign="Middle">
<asp:TableCell>

Open in new window


Also, you need to tell ASP.NET to make the <table> 100% of the available page space (by default HTML tables only stretch outwards to fill their content):

<asp:Table ID="tblOuter" runat="server" SkinID="OuterTblSkin" Width="100%">

Open in new window


Now the table will fit the page width, and the column sizes will adjust themselves automatically, which is the correct behaviour.  However, within ASP.NET you can specify the width of the columns in the FIRST ROW ONLY which cascades downwards through the cells within each column:

<asp:TemplateField HeaderText="Maximum Amount Financed" HeaderStyle-Width="15%">

Open in new window


Apply 15% to each column except the last column.  This is because you have seven columns in the first table.  7x15% = 105% which is too much, so we leave the last column's width empty so the browser just makes it fill whatever space is left.
0
 

Author Comment

by:KavyaVS
ID: 38442602
Hi Rouchie,
Thanks for all your valuable advices. I am making changes and let you know once I am done with it.

One thing I need to mention that there is lot of empty white space before the Scrollable Div. How to get rid of it.It is not showing any empty space on my machine.
But after publishing it is showing lot of empty space before the Div.
I tried to give the live link.But after saving it as .htm there is no empty space.
The Div is using follwing css classes. I commented padding and margin  properties but still empty space is there.

Any suggestion on this please.
html {  
  padding:0px;
  margin:0px;
}

body {
  background-color: Transparent;
  font-size: 11px;
  font-family: Arial;
  color:#000;
  text-align:center;
  margin:0px 0 0 0 0;
 padding-bottom: 5px;
 padding-left : 5px;
 padding-right : 5px;
 
}

div.scrollLoan {
height:400px;
overflow: auto;
border: 1px solid #666;
background-color: #CCD3EA;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;

}

Regards
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38444432
There is nothing within the code you've just posted that would cause the white space, so it must be coming from the same style sheets that I mentioned above.  Again the best you can do is comment out the rules and then put them back in one at a time.

Also if you apply this rule AFTER all your other style sheet rules:

* {border:1px solid red}

Open in new window


Everything on the page will get a red border.  You can then look at the space in between the page elements to identify where the problem lies.  Or, post an image of the rendered page (with the red borders showing) and I'll take a look.
0
 

Author Comment

by:KavyaVS
ID: 38444904
Hi Rouchie,
Please find the attached image.I don't want the empty space before the Div.
Please take a look.

Thanks
Grab3.png
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38445003
There must be one of the following properties that are set to cause this:

1) Margin-top
2) Margin-bottom
3) Padding-top
4) Padding-bottom
5) Min-height

Start with the thick red bordered container then work inwards.  In Firefox/IE there are property inspectors to analyse each element in turn).  In IE load the page, then press F12, click on the Arrow icon then click on the object in the page.  It will show all CSS properties being used and tell you where its getting them from.
0
 

Author Comment

by:KavyaVS
ID: 38445824
Hi Rouchie,
I tried that. It is using only red border properties. When I unchecked any of these properties the empty space gone and looks normal.

I tried with out the red border properties.As usual it is showing the empty space.I couldn't able to find the reason.If you have any other idea to get rid of it ,please let me know.

Please give me any online link or material to get grip with Content, Table controls and Div's.

Thanks
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38446961
Please send me another copy of the saved page (the one that renders with the space) plus the style sheets so I can try in IE and examine it.
0
 

Author Comment

by:KavyaVS
ID: 38460403
Hi Rouchie,

I attached the page with the empty space before scrollable Div.When I saved it as .htm the empty space gone.But as .aspx page in browser it is having empty space.
I attached saved page and style sheet that is being in use web_messages.css.


Please let me know any online link or material to get grip with Content, Table controls and Div's.

Thanks
Grab.htm
StyleSheet1.css
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38463155
I don't get the white space when I open the files you've provided.  However, I also don't see any style rules defined for the following two elements:

<div class="page">
	<div class="header">

Open in new window


So in the two attachments there are no rules for .page or .header

This style sheet is also missing:

<link rel="stylesheet" type="text/css" href="~/css/960.css">

Open in new window


And this is missing (assuming it is not StyleSheet1.css that you attached:

<link rel="stylesheet" type="text/css" href="Grab_files/Web_Messages.css">

Open in new window


I therefore think the rule that is causing the problem is hidden in one of these two files that you are seeing but I am not.

Are you using Firefox or IE?
0
 

Author Comment

by:KavyaVS
ID: 38464601
Hi Rouchie,
Thanks for your help.

I didn't even get the white space after saving it as .htm.It is showing the white space in browser.
 StyleSheet1.css is same as web_messages.css

While testing with Developer tools when I unchecked one of the  top properties in div#header the white space is gone.So I commented the div#header.
I didn't even find the page.
div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
 
 }

960.css file has only one style:

.grid_1,
.grid_11
{

      display:inline;

      float: left;

      position: relative;

      margin-left: 10.0px;

      margin-right: 10.0px;

      color: #525998;

}


One interesting thing I found was when I unchecked any of the properties with Developer tools the white space getting disappeared.

I am using IE.

I didn't even get the rule from css file that might causing the problem.
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38466293
You should not be using absolute positioning at all, so remove that particular rule from the style element.  Can you copy the rules from all of the style sheets into the actual HTML page so that instead of loading them using

<link rel="stylesheet" href="web_messages.css" />

Open in new window


They are put inside the HTML page like this

<style type="text/css">
   ... all style rules here ...
</style>

Open in new window


Then save the rendered page again as a HTM file.  This time we will get ALL the style together in one place.  I can then go through this one-by-one to find the offending style rule.
0
 

Author Comment

by:KavyaVS
ID: 38486203
Hi Rouchie
Sorry, for my late reply.

The Style sheet under App_Themes.
I mentioned  <pages theme="Default_Theme"> in Web.config file.So all the pages are using Web_Messages.css file and Web_Messages.skin.
How to make single page is not using Web_Messages.css file which is under Default_Theme.

Thanks
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38486457
Just cut all the style rules out of Web_Messages.css and paste into your HTML page (you might want to backup the project first in case this goes wrong!).

<style type="text/css">
   paste Web_Messages.css contents here
</style>

Open in new window


Then run the page in the browser.  Any rules from the Theme will then be pushed into the rendered HTML in the browser automatically.  Then save the HTML page in the browser and send it to me.
0
 

Author Comment

by:KavyaVS
ID: 38486900
It is still showing the style sheet link in view source.But I commented everything in that Web_Messages.css.I don't want to mess up.
<link href="../App_Themes/Default_Theme/Web_Messages.css" type="text/css" rel="stylesheet" /></head>

Whatever styles the page is using declared in the page itself.
Please check.

Thanks
grab.htm
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38489195
When I open the file I don't see any white space!  Can you open the file you attached (from the Experts link above) and see if the white space appears in grab.htm?

Then try this...

1) Clear your browser cache and restart the browser, then reload the page - this is important!

2) Remove any reference to height 100% in the HTML, CSS, Themes - anywhere!  Height should never be set to 100% and should be created automatically by the inner content.
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38489197
Also tell me if you have Firefox?
0
 

Author Comment

by:KavyaVS
ID: 38491044
Hi Rouchie,
After saving the file to .htm I am not seeing the white space. I am seeing the white space while viewing the  .aspx page in browser.

1.I clear the browser content often.That is not a issue at all.
2.I removed all references to height 100% from skin files,HTML and css. But no difference.
I don't have FireFox.Will it be useful for finding the problem.

I want to get grip on content control and Div.Is there any good online stuff.


Thanks
0
 
LVL 25

Assisted Solution

by:Rouchie
Rouchie earned 2000 total points
ID: 38496084
You can do a search for 'layouts using divs' and take your pick.

As for Firefox, yes its worth a try in this case.  Download it from Mozilla, and then use the Add-ons feature to get a (free) add-on called 'Web Developer'.  when you've got it, reply here and I'll guide you through it.
0
 

Author Comment

by:KavyaVS
ID: 38514254
Hi Rouchie,

I am not using the Div.Afterthat it is not showing the white space.

Thank you very much for helping me.I will close this ticket.

I will open another Ticket
The issue is when I click the Edit command button the Text Boxes are increased in width and going beyond the Screen.
In other words it is showing horizontal scroll bars and I am using hte Horizontal Scroll bars to view and  edit  the Text Boxes.

The Page when it is initially requested or in edit mode should occupy not more than 80% of the screen.

I will attach the live link.
The question title will be How to display the page content with in the Screen in Page edit mode.
Please help me.

Thanks
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 38514325
Okay no problem.  When you've posted the new question then post a link to it here so I get an email!
0
 

Author Comment

by:KavyaVS
ID: 38514594
Question ID:27906896
How to display the page content with in the Screen in Page edit mode.
Thanks
0
 

Author Closing Comment

by:KavyaVS
ID: 38515614
Thanks for your time and suggestions.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
In a question here at Experts Exchange (https://www.experts-exchange.com/questions/29062564/Adobe-acrobat-reader-DC.html), a member asked how to create a signature in Adobe Acrobat Reader DC (the free Reader product, not the paid, full Acrobat produ…
Suggested Courses
Course of the Month14 days, 16 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question