Space before page

Wilfredo Rosado · #1 (**permalink**) February 12th, 2012, 11:51 PM

Hi Imar,

I finaly decided to read the ASP.NET 4.0 version. Everthing is going good, except for one minor thing I can't figure out. I believe I may have had a similar problem when I did the ASP.Net 3.5. I cannot remember for the life of me what ou told me to do to fix the problem.

TheProblem:

The masterpage looks fine in VWD, however when I bring it up in the Browser for some reason there appears a 3/8" gap at the top before the web page.

I've tried several tings with no effect. Do you have any solutios? Do you need to see specifc files? let me know.

Fred

irProject · #2 (**permalink**) February 13th, 2012, 12:12 AM

Hi,
This is because of \r\n after @Page or @Master directives. to avoid this you can concat directives with <!Doctype section:

Code:

<%@ Page Language="vb" AutoEventWireup="true" ValidateRequest="false" CodeBehind="Test.aspx.vb" Inherits="UI.Test" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Imar · #3 (**permalink**) February 13th, 2012, 02:13 AM

Hi Fred,

This could also be caused by margin or padding on the body element. Have you tried setting those to zero on the body in your CSS file?

Code:

body
{
  margin: 0;
  padding: 0;
}

If that doesn't help, can you post the code for the master page, your CSS file(s) and any other relevant file(s).

Cheers,

Imar

irProject · #4 (**permalink**) February 13th, 2012, 03:05 AM

Hi friends

you can reset all default settings on different browsers.

this link can be helpful

http://meyerweb.com/eric/tools/css/reset/

Wilfredo Rosado · #5 (**permalink**) February 13th, 2012, 04:26 PM

Hi Imar,

Here is my CSS file:

Code:

body
{
  margin:  0;
  padding: 0;
  background-color: #d0FFF1;    /*FAE2CA;*/
}

*
{
  font-family: Arial;
  /*height: 27px;*/
}

.treestyle
{
  width: 769px;
  height: 494px;
}

.headerText
{
  font-family: Algerian;
  font-size: 40px;
  font-weight: bold;
  text-align:center;
  /*height: 13px;
  */
}

#PageWrapper
{
  margin: auto;
  width: 844px;
}

#Header
{
  /*padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  vertical-align: top;
  */
  background-color: #00ffff; 
  color: #2C7421;
  width: 844px;
  height: 45px;
}

#MainContent
{
  background-color: #ffffff;
  background-image: ~/Images/Tree.jpg;
  width: 844px;
  height: 540px;
  text-align: center;
}

#MenuWrapper
{
  color: #2C7421;
  background-color: #ffffff;
  width: 844px;
}

#Footer
{
  color: #2C7421;
  background-color: #ffffff;
  width: 844px;
  clear both;
}

Here is the code for the MasterPage file:

Code:

<%@ Master Language="VB" CodeFile="FrontEnd.master.vb" Inherits="MasterPages_FrontEnd" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="../Styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <form id="form1" runat="server">
      <div id="PageWrapper">
        <div id="Header">
          <p class="headerText" >The Family Tree</p>
        </div>
        <div id="MainContent">
          <asp:ContentPlaceHolder id="cpMainContent1" runat="server">
          </asp:ContentPlaceHolder>
        </div>
        <div id="MenuWrapper">Menu goes here</div>
        <div id="Footer">Footer goes here</div>
      </div>
    </form>
  </body>
</html>

With the MasterPage open in VWD I press CTRL & F5 and the browser immediately shows the page with a 3/8" gap at the top before the webpage. Setting the margin and padding to 0 didn't help.

Fred

Wilfredo Rosado · #6 (**permalink**) February 13th, 2012, 09:15 PM

Hi irProject,

I looked at my @Page as you mentioned and the only difference I could see was that my Doctype had one word different. Mine says Transitional, yours said strict. I tried your version and still have the gap before the webpage.

Here is my version:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Thanks for your response.

Fred

irProject · #7 (**permalink**) February 13th, 2012, 11:49 PM

Hi Fred

I think the problem is with margin settings of PageWrapper

you should set margin to "0 auto" and no to "auto"

Code:

#PageWrapper
{
  margin: 0 auto;
  width: 844px;
}

margin: [top] [right] [bottom] [left];      sample ===> margin: 0 10px 2px 7px;
or
margin: [top,right,bottom,left];       sample===> margin: 10px;
or
margin: [top,bottom] [right,left];       sample===> margin: 0 auto;

so if you set margin:auto; all margins are automatically set, and your wrapper is placed in the center of it's parent

Wilfredo Rosado · #8 (**permalink**) February 14th, 2012, 12:34 AM

Hey irProject,

Thanks for that info on setting the margins...very useful as I didn't have it, and at times I wasn't sure which came first.

I tried setting the Pagewraper's margin as you said "0 auto", unfortunately I still get the 3/8" gap before the webpage.

Fred

irProject · #9 (**permalink**) February 14th, 2012, 01:32 AM

Hi Fred

i checked it but there wasn't any problem. i'll check it in deeper view as soon as possible

http://rezabaiat88.persiangig.com/image/test.gif

* view generated source of page in runtime.
* remove all styles and add them one by one and test the result after each step
* test your style over plain html file (not aspx pages)
* etc!

these are tests that you can make to find source of problem. the key point in testing is atomic test -> remove all related states that can affect the result and add them step by step and test each step

Imar · #10 (**permalink**) February 14th, 2012, 03:54 AM

Hi Fred,

margin: auto only affects the left and right margin and doesn't change the vertical position of an element.

In your case, the behavior is caused by the <p> element in your Header. It appears to have margin which causes the whitespace to appear. Modify your headerText rule set as follows:

Code:

 
 
.headerText
{
  font-family: Algerian;
  font-size: 40px;
  font-weight: bold;
  text-align:center;
  margin: 0;
}

This removes the margin from the <p> element which in turn removes the gap at the top.

Not exactly sure why this is though; without margin set to 0, it seems to take the font-size as the margin top and bottom.....

Cheers,

Imar

Need to download code?

Navigation