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

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
KavyaVSAsked:
Who is Participating?
 
RouchieConnect With a Mentor Commented:
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
 
RouchieCommented:
Can you post the live URL please?  You had problems with other style sheets interfering last time
0
 
KavyaVSAuthor Commented:
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
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
RouchieCommented:
Also tell me if you have Firefox?
0
 
KavyaVSAuthor Commented:
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
 
RouchieConnect With a Mentor Commented:
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
 
KavyaVSAuthor Commented:
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
 
RouchieCommented:
Okay no problem.  When you've posted the new question then post a link to it here so I get an email!
0
 
KavyaVSAuthor Commented:
Question ID:27906896
How to display the page content with in the Screen in Page edit mode.
Thanks
0
 
KavyaVSAuthor Commented:
Thanks for your time and suggestions.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.