PDA

View Full Version : Positioning the site without a gap at the top of the header?


blanchard
08-08-2008, 05:49 PM
OK here's my code, now this is really doing my head in.
I want the site to have no gap at the top but it has and I have no idea on how to remove it. I have set Top-margin to "0" and when i click refresh I see in the design view it has changed it and it looks fine but then when I preview it in Firefox and Explorer there's still a gap....arghhhhh!

<!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=utf-8" />
<title>untitled</title>
<style type="text/css">
<!--
.bgheader {
background-image: url(AVheader2.jpg);
background-repeat: no-repeat;
background-position: center top;
}
.menulinks {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #908080;
font-weight: bold;
text-align: center;
}
.jobtitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: lighter;
color: #447A9C;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
}
.jobinfo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
background-color: #447A9C;
}
body {
background-color: #CCCCCC;
margin-top: 0px;
}
-->
</style>
</head>

<body>
<table width="800" height="852" border="0" align="center" cellspacing="0" bgcolor="#153B60" class="bgheader">
<tr>
<td width="160" height="141" valign="middle">&nbsp;</td>
<td width="151">&nbsp;</td>
<td width="155">&nbsp;</td>
<td width="162">&nbsp;</td>
<td width="150">&nbsp;</td>
</tr>
<tr>
<td height="16" class="menulinks">Location</td>
<td class="menulinks">Position</td>
<td class="menulinks">Start Date</td>
<td class="menulinks">Contact</td>
<td rowspan="2" valign="top" bgcolor="#908081"><div align="center">
<p><img src="buttonfiller.jpg" width="125" height="125" /></p>
<p><img src="buttonfiller small.jpg" width="125" height="50" /></p>
<p><img src="buttonfiller 2.jpg" width="125" height="125" /></p>
<p><img src="buttonfiller small 2.jpg" width="125" height="50" /></p>
<p><img src="buttonfiller 3.jpg" width="125" height="125" /></p>
<p><img src="buttonfiller small 3.jpg" width="125" height="50" /></p>
</div></td>
</tr>
<tr>
<td height="695" colspan="4" align="left" valign="top" bgcolor="#FFFFFF" class="jobtitle">JOB
TITLE<br />
b description, this will consist
of a few lines from the main job description submitted along with the
full description.
<p class="jobinfo">Location: Area&nbsp; | &nbsp;Position: Permenant &nbsp;| &nbsp;Salary: 28k&nbsp; | &nbsp;Start Date: 00/00/08</p>
<p>JOB TITLE<br />
b description, this will consist of a few lines from the main job description
submitted along with the full description.</p>
<p class="jobinfo">Location: Area&nbsp; |&nbsp; Position: Permenant&nbsp; | &nbsp;Salary: 28k&nbsp; |&nbsp;
Start Date: 00/00/08</p>
<p>JOB TITLE<br />
b description, this will consist of a few lines from the main job description
submitted along with the full description.</p>
<p class="jobinfo">Location: Area &nbsp;|&nbsp; Position: Permenant &nbsp;| &nbsp;Salary: 28k&nbsp; |&nbsp;
Start Date: 00/00/08</p>
<p>JOB TITLE<br />
b description, this will consist of a few lines from the main job description
submitted along with the full description.</p>
<p class="jobinfo">Location: Area&nbsp; | &nbsp;Position: Permenant &nbsp;| &nbsp;Salary: 28k &nbsp;|&nbsp;
Start Date: 00/00/08</p>
<p>JOB TITLE<br />
b description, this will consist of a few lines from the main job description
submitted along with the full description.</p>
<p class="jobinfo">Location: Area&nbsp; |&nbsp; Position: Permenant&nbsp; | &nbsp;Salary: 28k &nbsp;|&nbsp;
Start Date: 00/00/08</p>
</td>
<br />
<br />

</tr>
</table>
</body>
</html>

d a v e
08-08-2008, 07:15 PM
use

body {
background-color: #CCCCCC;
margin-top: 0px;
padding-top:0;
}

blanchard
08-08-2008, 07:47 PM
still get the same results with a gap at the top

d a v e
08-08-2008, 09:16 PM
ok - weird!
validating the code i noticed the errors - actually it flags them as *warnings* (?!) concerning this
</td>
<br />
<br />

</tr>
</table>


take out
<br />
<br />
and it should be ok!

blanchard
08-09-2008, 10:29 AM
Excellent thanks very much dave
spot on, and thanks for mentioning the validating thingy-ma-bob this will be something i'll have to use me thinks.

d a v e
08-09-2008, 11:37 AM
as well as using the w3c validator -e.g via the firefox web developer extension
( http://chrispederick.com/work/web-developer/ )

you can also use one for local pages (i.e. from your hard drive as well rather than having to upload first)

http://users.skynet.be/mgueury/mozilla/download.html