Solved

margin-top: 0px; - Not working??

Posted on 2009-05-14
4
841 Views
Last Modified: 2012-05-07
I have CSS code that is supposed to have the top row of a table up against the top of the browser, but there is still a space above the table.  What am I doing wrong??
body {

	font-family: Arial, Helvetica, sans-serif;

	margin-top: 0px;	

	margin-bottom: 0px;

	margin-left: 0px;

	margin-right: 0px;

}
 

   #submenustyle {

      margin: 0 auto;

      text-align: left;

	  height: 30px;

      vertical-align: middle;

   }
 
 
 

.menulinks {

    font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	font-weight: bold;

	color: #4169E1;

	vertical-align: top;
 

}
 

a.menulinks {

    font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	font-weight: bold;

	color: #4169E1;

	vertical-align: top;

	text-decoration:none;
 

}
 

a.menulinks:hover {  

    font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	font-weight: bold;

	color: #00008B;

	vertical-align: top;

	text-decoration:none;
 

}
 
 

.maintext {

    font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	color: #000000;

	vertical-align: top;

			
 

}
 

a.maintext {

        font-family: Arial, Helvetica, sans-serif;

        text-decoration:none;

        font-size: 10px;

		color: #000000;
 
 

}
 

a.maintext:hover {  font-family: Arial, Helvetica, sans-serif;

	font-size: 10px;

	color: #012315;

	background-color: #FDC844;
 
 

}
 
 
 
 
 

.subtopictext {

        font-family: Arial, Helvetica, sans-serif;

	font-size: 18px;

	color: #7b7b7b;

}  
 

div#main h1 {

	margin:10px 0 0 7px;

	padding:0;

	width:98%;

	text-align:left;

	font-size:25px;

	color:#333;

	border-bottom:1px dotted #012315;

	font-weight:normal;

}
 

////////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////
 

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

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

</head>
 

<body>
 
 

<table width="800" border="0" align="center">

  <tr>

    <td><!-- Header Bar -->

	<img src="images/footerline.jpg" />

	</td>

  </tr>

  <tr>

    <td><!-- Logo/ Top Level Menu Row -->

			<table width="800" border="0" cellpadding="0" cellspacing="0">

  				<tr>

    				<td width="200"><!-- Logo -->

					Insert Logo Here

					</td>

   					<td width="600"><!-- Top Level Menu -->

					<img src="images/link.jpg"

					 /><img src="images/link.jpg"

					 /><img src="images/link.jpg"

					 /><img src="images/link.jpg"

					 /><img src="images/link.jpg"

					 /><img src="images/link.jpg"

					 /></td>

  				</tr>

			</table>

	</td>

  </tr>

......

Open in new window

0
Comment
Question by:tru504187211
  • 2
4 Comments
 
LVL 12

Accepted Solution

by:
Chad Haney earned 500 total points
Comment Utility
Border Collapse is part of your problem.

Add the style to the table(s) of:
border-collapse:collapse;

And also you will want to add the [cellpadding="0" cellspacing="0"] to the top table.

Recommend using the Firefox add-on of Web Developer and you can see the table outlines (outline>table>cells).
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

body {

        font-family: Arial, Helvetica, sans-serif;

        margin:0px;

}

table{

	border-collapse:collapse;
 

}

 

   #submenustyle {

      margin: 0 auto;

      text-align: left;

          height: 30px;

      vertical-align: middle;

   }

 

 

 

.menulinks {

    font-family: Arial, Helvetica, sans-serif;

        font-size: 14px;

        font-weight: bold;

        color: #4169E1;

        vertical-align: top;

 

}

 

a.menulinks {

    font-family: Arial, Helvetica, sans-serif;

        font-size: 14px;

        font-weight: bold;

        color: #4169E1;

        vertical-align: top;

        text-decoration:none;

 

}

 

a.menulinks:hover {  

    font-family: Arial, Helvetica, sans-serif;

        font-size: 14px;

        font-weight: bold;

        color: #00008B;

        vertical-align: top;

        text-decoration:none;

 

}

 

 

.maintext {

    font-family: Arial, Helvetica, sans-serif;

        font-size: 10px;

        color: #000000;

        vertical-align: top;

                        

 

}

 

a.maintext {

        font-family: Arial, Helvetica, sans-serif;

        text-decoration:none;

        font-size: 10px;

                color: #000000;

 

 

}

 

a.maintext:hover {  font-family: Arial, Helvetica, sans-serif;

        font-size: 10px;

        color: #012315;

        background-color: #FDC844;

 

 

}

 

 

 

 

 

.subtopictext {

        font-family: Arial, Helvetica, sans-serif;

        font-size: 18px;

        color: #7b7b7b;

}  

 

div#main h1 {

        margin:10px 0 0 7px;

        padding:0;

        width:98%;

        text-align:left;

        font-size:25px;

        color:#333;

        border-bottom:1px dotted #012315;

        font-weight:normal;

}
 

</style>

</head>

 

<body>

 

 

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td><!-- Header Bar -->

        <img src="images/footerline.jpg" />

        </td>

  </tr>

  <tr>

    <td><!-- Logo/ Top Level Menu Row -->

                        <table width="800" border="0" cellpadding="0" cellspacing="0">

                                <tr>

                                <td width="200"><!-- Logo -->

                                        Insert Logo Here

                                        </td>

                                        <td width="600"><!-- Top Level Menu -->

                                        <img src="images/link.jpg"

                                         /><img src="images/link.jpg"

                                         /><img src="images/link.jpg"

                                         /><img src="images/link.jpg"

                                         /><img src="images/link.jpg"

                                         /><img src="images/link.jpg"

                                         /></td>

                                </tr>

                        </table>

        </td>

  </tr>

</table>

</body>

</html>

Open in new window

0
 
LVL 19

Expert Comment

by:erikTsomik
Comment Utility
what browser are you on. I am on the IE7 and it works just fine for me
0
 
LVL 12

Expert Comment

by:Chad Haney
Comment Utility
Did the border-collapse resolve your issue?  If not please provide further information so we can assist you.
0
 

Author Closing Comment

by:tru504187211
Comment Utility
Yes, this solution worked.

THANKS!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now