Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 12th, 2012, 11:51 PM
Authorized User
Points: 303, Level: 6
Points: 303, Level: 6 Points: 303, Level: 6 Points: 303, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Location: Connecticut, USA
Posts: 63
Thanks: 18
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Wilfredo Rosado
Question Space before page

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
Reply With Quote
  #2 (permalink)  
Old February 13th, 2012, 12:12 AM
Friend of Wrox
Points: 742, Level: 10
Points: 742, Level: 10 Points: 742, Level: 10 Points: 742, Level: 10
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2009
Location: Tehran, Iran
Posts: 156
Thanks: 13
Thanked 16 Times in 16 Posts
Default @Page directive

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">
__________________
happy every time, happy every where

Reza Baiat

Last edited by irProject; February 13th, 2012 at 12:16 AM.
Reply With Quote
  #3 (permalink)  
Old February 13th, 2012, 02:13 AM
Imar's Avatar
Wrox Author
Points: 66,761, Level: 100
Points: 66,761, Level: 100 Points: 66,761, Level: 100 Points: 66,761, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,147
Thanks: 65
Thanked 1,391 Times in 1,371 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #4 (permalink)  
Old February 13th, 2012, 03:05 AM
Friend of Wrox
Points: 742, Level: 10
Points: 742, Level: 10 Points: 742, Level: 10 Points: 742, Level: 10
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2009
Location: Tehran, Iran
Posts: 156
Thanks: 13
Thanked 16 Times in 16 Posts
Default reset css

Hi friends

you can reset all default settings on different browsers.

this link can be helpful

http://meyerweb.com/eric/tools/css/reset/
__________________
happy every time, happy every where

Reza Baiat
Reply With Quote
The Following User Says Thank You to irProject For This Useful Post:
Wilfredo Rosado (February 13th, 2012)
  #5 (permalink)  
Old February 13th, 2012, 04:26 PM
Authorized User
Points: 303, Level: 6
Points: 303, Level: 6 Points: 303, Level: 6 Points: 303, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Location: Connecticut, USA
Posts: 63
Thanks: 18
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Wilfredo Rosado
Question

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
Reply With Quote
  #6 (permalink)  
Old February 13th, 2012, 09:15 PM
Authorized User
Points: 303, Level: 6
Points: 303, Level: 6 Points: 303, Level: 6 Points: 303, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Location: Connecticut, USA
Posts: 63
Thanks: 18
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Wilfredo Rosado
Question

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
Reply With Quote
  #7 (permalink)  
Old February 13th, 2012, 11:49 PM
Friend of Wrox
Points: 742, Level: 10
Points: 742, Level: 10 Points: 742, Level: 10 Points: 742, Level: 10
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2009
Location: Tehran, Iran
Posts: 156
Thanks: 13
Thanked 16 Times in 16 Posts
Default margin

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
__________________
happy every time, happy every where

Reza Baiat
Reply With Quote
  #8 (permalink)  
Old February 14th, 2012, 12:34 AM
Authorized User
Points: 303, Level: 6
Points: 303, Level: 6 Points: 303, Level: 6 Points: 303, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Location: Connecticut, USA
Posts: 63
Thanks: 18
Thanked 0 Times in 0 Posts
Send a message via Yahoo to Wilfredo Rosado
Unhappy

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
Reply With Quote
  #9 (permalink)  
Old February 14th, 2012, 01:32 AM
Friend of Wrox
Points: 742, Level: 10
Points: 742, Level: 10 Points: 742, Level: 10 Points: 742, Level: 10
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2009
Location: Tehran, Iran
Posts: 156
Thanks: 13
Thanked 16 Times in 16 Posts
Default Hello world!

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
__________________
happy every time, happy every where

Reza Baiat

Last edited by irProject; February 14th, 2012 at 03:26 AM.
Reply With Quote
  #10 (permalink)  
Old February 14th, 2012, 03:54 AM
Imar's Avatar
Wrox Author
Points: 66,761, Level: 100
Points: 66,761, Level: 100 Points: 66,761, Level: 100 Points: 66,761, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 16,147
Thanks: 65
Thanked 1,391 Times in 1,371 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
The Following User Says Thank You to Imar For This Useful Post:
Wilfredo Rosado (February 14th, 2012)
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Flash animation created extra space on web page itHighway Flash (all versions) 0 May 22nd, 2009 05:54 AM
normalize-space() gantait XSLT 0 February 26th, 2007 02:29 AM
Looks like a space but it isn't. rstelma SQL Server 2000 3 September 7th, 2005 07:17 PM
space crmpicco Javascript How-To 1 February 7th, 2005 12:26 PM
space hassles Adam H-W HTML Code Clinic 16 June 30th, 2004 04:09 PM



All times are GMT -4. The time now is 09:47 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.