[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1402
  • Last Modified:

how to remove margins of page in asp.net using css

Hi,

I've got the following css file: -

html, body
{
background-color:#ded6d4;
text-align:center;
margin:0;
padding:0;
}

table.two
{
table-layout: fixed
}

p.blue
{
font-family:"Bookman Old Style","Trebuchet MS", Arial, Helvetica, sans-serif;
color: rgb(255,255,255);
font-size:60px;
}

p.grey
{
color: rgb(100,100,100);
text-align:center;
font-family:"times";
font-size:6px;
}

And the following asp.net code: -

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

<!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">
<link rel="stylesheet" type="text/css" href="Main.css">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body class = "body">
    <table class="two" width = "100%" border="0">
    <tr bgcolor="black"><td><p class ="blue">Title Here!!!</p></td> </tr>
    <tr bgcolor="white"><td><p class ="grey" >Title Here!!!</p></td> </tr>
    </table>
</body>
</html>

I am trying to find out how I remove the margins that are on the left, right hand side and at the top as I need to make it so the black cell of the table is flush to the page. I have also attached a screenshot. Sorry I am new to css and asp.net but hope you can help.

Many Thanks
Lee
ss.jpg
0
ljhodgett
Asked:
ljhodgett
  • 4
1 Solution
 
abelCommented:
The whitespace is not from the body or the html tag, it is the spacing between the cells (even though you only have two cells and one column). Change the table line to this:

<table class="two" width = "100%" border="0" cellpadding="0" cellspacing="0">

and you should be ok.
0
 
nmarunCommented:
try
padding:-2;

in the 'two' class.
0
 
abelCommented:
To find out where the spacing actually is, I usually add a border around the suspected element. In this case, I wanted to know where the table actually started. So to find out whether the table really starts in the top left corner, I added:

        table
        {
            border: 1px red solid;
        }

which showed what you see in the partial screenshot. From there it was a lot easier to deduct where the real problem was.

ScreenShot063.png
0
 
abelCommented:
The hint of nmarun will also work, but your'e guessing then what browsers are using as default spacing. It's usually best to set cellpadding/spacing to zero and then use CSS for real padding and spacing, which puts you in full control.

The reason for these properties still being there (and annoying you) is historical (backward compatibility). Put as a mnemonic to your mind that whenever you work with tables + CSS in standards compliance modes (i.e.: real xhtml) that you add the ubiquitous cellspacing/padding. This will avoid surprises.

One tiny thing: The line

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

should really be

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

to be xhtml compatible (empty tags that can never have content must be closed with "/>", this will stop Visual Studio from complaining and avoids weird behaviors of browsers).
0
 
abelCommented:
Glad it worked!
0

Featured Post

Independent Software Vendors: 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!

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now