I have an ASP.Net 4.0 Masterpage app. I have a header and a content and I want the content to fill the IE page completely. Right now it only displays the table and white space below it.
Could you post the entire contents of your Site.css file? It seems like there is a conflict between the styles that you have mentioned and any additional styles that may be present within your Site.css file.
I believe that some of your CSS styles are "cascading" and overriding some of your existing files. If you want to have a header of a specific color and then have the rest of the page another, you will need to declare your background initially and then use
other styles to override that one.
For example :
<!-- Applies a blue background to the entire page -->
body,html { background: blue; margin: 0; padding :0;}
<!-- The header will override the previous style and use a different background color -->
.header { background: #4b6c9e; height: 100px; }
You also have several heights that are being overridden such as height: 100% and the height properties that you have on many of your <div> elements. You can find an example
here using your existing styles and moving a few things around.
What I did (and let me know if there is a better way) was to define a 'div' class and after the end of the table and before the end of the content I put
<div class="div" />
Seems to fill the bottom of the page. I only have a header and content.
The self-closing <div> element is not valid HTML mark-up. The <div> element is a block-level element and is used to store other elements, which is why it expects a closing tag to indicate when its contents ends.
skifreak
Member
144 Points
439 Posts
Content page not displaying color on the entire page
Jan 22, 2013 12:52 PM|LINK
I have an ASP.Net 4.0 Masterpage app. I have a header and a content and I want the content to fill the IE page completely. Right now it only displays the table and white space below it.
.div { height: 280px; background-color: #FFFFCC; } /* HEADINGS ----------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { font-size: 1.5em; color: #666666; font-variant: small-caps; text-transform: none; font-weight: 200; margin-bottom: 0px; font-family: Verdana; } h1 { font-size: 1.6em; padding-bottom: 0px; margin-bottom: 0px; font-family: Verdana; } h2 { font-size: 1.5em; font-weight: 600; font-family: Verdana; } h3 { font-size: 1.2em; font-family: Verdana; } h4 { font-size: 1.1em; font-family: Verdana; } h5, h6 { font-size: 1em; font-family: Verdana; } /* PRIMARY LAYOUT ELEMENTS ----------------------------------------------------------*/ .page { width: 100%; height: 100%; /*margin: 20px auto 0px auto;*/ border: 1px solid #496077; font-family: Verdana; font-size: 12px; } .header { position: relative; margin: 0px; padding: 0px; background: #4b6c9e; width: 100%; height: 100%; font-family: Verdana; } .header h1 { font-weight: 700; margin: 0px; padding: 0px 0px 0px 0px; color: #f9f9f9; border: none; line-height: 2em; font-size: 2em; font-family: Verdana; } .title { display: block; font-family: Verdana; text-align: center; width: auto; } body, html { margin: 0; padding: 0; height: 100%; }Also, for some reason when I make a change and start up the web page, I have to hit F5 to refresh the page as it seems it is cached.
Any help would be greatly appreciated.
roopeshreddy
All-Star
20143 Points
3327 Posts
Re: Content page not displaying color on the entire page
Jan 22, 2013 04:50 PM|LINK
Hi,
Can you show the HTML?
If you apply the bagroud color to Content Page, then it will be applied to content page only!
We can assist better, if we see the code!
Roopesh Reddy C
Roopesh's Space
skifreak
Member
144 Points
439 Posts
Re: Content page not displaying color on the entire page
Jan 22, 2013 05:43 PM|LINK
Here is the Masterpage code. That is the only place i reference the style sheet.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ConfirmationsUI.SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head runat="server"> <title>Confirmations Automation</title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form runat="server"> <div class="page"> <div class="header"> <table> <tr> <td style="width:30%; text-align:center"> <asp:LinkButton ID="lnkHome" ForeColor="White" runat="server">Home</asp:LinkButton> <br /> <asp:Label ID="lblMTR1" ForeColor="White" Text="MTR1" runat="server" /> </td> <td style="width:55%"> <div class="title"> <h1> Confirmations Automation </h1> </div> </td> <td style="width:30%; text-align:center"> <asp:Label ID="lblCurrentDateTime" ForeColor="White" Text="dateandtime" runat="server" /> <br /> <asp:Label ID="lblLoggedInAsLbl" Text="Logged in as: " ForeColor="White" runat="server" /> <asp:Label ID="lblLoggedInAs" Text="" ForeColor="White" runat="server" /> </td> </tr> </table> <asp:ContentPlaceHolder ID="MainContent" runat="server"/> </div> </div> </form> </body> </html>Rion William...
All-Star
26776 Points
4425 Posts
Re: Content page not displaying color on the entire page
Jan 22, 2013 06:11 PM|LINK
Could you post the entire contents of your Site.css file? It seems like there is a conflict between the styles that you have mentioned and any additional styles that may be present within your Site.css file.
Example using the styles you provided and source
skifreak
Member
144 Points
439 Posts
Re: Content page not displaying color on the entire page
Jan 22, 2013 06:41 PM|LINK
That is the entire file, the rest is commented out.
Rion William...
All-Star
26776 Points
4425 Posts
Re: Content page not displaying color on the entire page
Jan 22, 2013 06:50 PM|LINK
I believe that some of your CSS styles are "cascading" and overriding some of your existing files. If you want to have a header of a specific color and then have the rest of the page another, you will need to declare your background initially and then use other styles to override that one.
For example :
<!-- Applies a blue background to the entire page --> body,html { background: blue; margin: 0; padding :0;} <!-- The header will override the previous style and use a different background color --> .header { background: #4b6c9e; height: 100px; }Example
You also have several heights that are being overridden such as height: 100% and the height properties that you have on many of your <div> elements. You can find an example here using your existing styles and moving a few things around.
skifreak
Member
144 Points
439 Posts
Re: Content page not displaying color on the entire page
Jan 22, 2013 07:27 PM|LINK
What I did (and let me know if there is a better way) was to define a 'div' class and after the end of the table and before the end of the content I put
Seems to fill the bottom of the page. I only have a header and content.
Rion William...
All-Star
26776 Points
4425 Posts
Re: Content page not displaying color on the entire page
Jan 22, 2013 07:30 PM|LINK
Typically you won't want to use the self-closing tags like that on a <div> element, try using this instead :
skifreak
Member
144 Points
439 Posts
Re: Content page not displaying color on the entire page
Jan 23, 2013 11:39 AM|LINK
OK but why? it worked.
Rion William...
All-Star
26776 Points
4425 Posts
Re: Content page not displaying color on the entire page
Jan 23, 2013 12:05 PM|LINK
The self-closing <div> element is not valid HTML mark-up. The <div> element is a block-level element and is used to store other elements, which is why it expects a closing tag to indicate when its contents ends.