Go Premium for a chance to win a PS4. Enter to Win

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

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

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
tru504187211
Asked:
tru504187211
  • 2
1 Solution
 
Chad HaneyChief Technology OfficerCommented:
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
 
erikTsomikSystem Architect, CF programmer Commented:
what browser are you on. I am on the IE7 and it works just fine for me
0
 
Chad HaneyChief Technology OfficerCommented:
Did the border-collapse resolve your issue?  If not please provide further information so we can assist you.
0
 
tru504187211Author Commented:
Yes, this solution worked.

THANKS!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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