I've been trying forever (well, over five months) to figure out exactly why this is happening, to no avail.
http://www.sjbmx.com
If you click that link, you'll notice at the top of the page, the header image is off the side and top edges by one pixel. I want that space to disappear.
Here's the relevant CSS for the entire site:
>/* Body */
body{background:#000000;font:10px Verdana;color:#000000;margin:0px;padding:0px;border:0px}
/* Tables */
table,td,tr{background:#D8E5E9;font:10px Verdana;color:#000000;margin:0px;cellpadding:0px;border:0px}
And here's the HTML for the header:
><html>
<head>
<title>sjbmx.com</title>
<link rel="stylesheet" href="sjbmx.css" type="text/css"/>
<script LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function CaricaFoto(img){
foto1= new Image();
foto1.src=(img);
Controlla(img);
}
function Controlla(img){
if((foto1.width!=0)&&(foto1.height!=0)){
viewFoto(img);
}
else{
funzione="Controlla('"+img+"')";
intervallo=setTimeout(funzione,20);
}
}
function viewFoto(img){
largh=foto1.width+20;
altez=foto1.height+20;
stringa="width="+largh+",height="+altez;
finestra=window.open(img,"",stringa);
}
// End -->
</script>
</head>
<body>
<center>
<table align="center" width="800" height="100%">
<tr>
<td align="left" valign="top">
<!-- ImageReady Slices (header.psd) -->
<table id="Table_01" width="800" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="images/header_01.gif" width="800" height="70" alt=""></td>
</tr>
<tr>
<td>
<img src="images/header_02.gif" width="609" height="30" alt=""></td>
<td>
<a href="index.php">
<img src="images/header_news.gif" width="31" height="30" border="0" alt=""></a></td>
<td>
<img src="images/header_04.gif" width="19" height="30" alt=""></td>
<td>
<a href="riders.php">
<img src="images/header_riders.gif" width="37" height="30" border="0" alt=""></a></td>
<td>
<img src="images/header_06.gif" width="14" height="30" alt=""></td>
<td>
<a href="photos.php">
<img src="images/header_photos.gif" width="43" height="30" border="0" alt=""></a></td>
<td>
<img src="images/header_08.gif" width="15" height="30" alt=""></td>
<td>
<a href="links.php">
<img src="images/header_links.gif" width="29" height="30" border="0" alt=""></a></td>
<td>
<img src="images/header_10.gif" width="3" height="30" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</td>
</tr>
<tr>
<td align="left" valign="top" height="100%">
<br><br>
Any suggestions? This is really annoying to me, although almost no one else ever seems to notice it.