Sorry, but I don't think I understand the problem. The site you linked displays exactly the same in Safari (2.0) and IE (5.2) under Tiger. So I'm not sure what the problem is.
The snippet of code you posted is a bit baffling, as the only real content of the table is the image ... why use a table at all? Just the image (in a div) with some CSS positioning would be much simpler an probably cause less problems across browsers and platforms.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>OFF THE RACK</title>
<link rel="shortcut icon" href="http://www.offtherackpro.com/favicon.ico" />
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #B30000;
}
body {
background-color: #FFFFFF;
margin: 0;
}
img {
display: block;
border: 0;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body onLoad="WindowTools('X','2','100%','0','0','0','0','0','0','0','0')">
<div class="main">
<img src="http://www.offtherackpro.com/images/OTRP_splash3.jpg" width="708" height="542" usemap="#Map" />
<map name="Map">
<area shape="rect" coords="166,288,241,303" href="http://www.macromedia.com/go/getflashplayer/" />
<area shape="rect" coords="166,312,241,326" href="http://www.apple.com/quicktime/download/" />
<area shape="rect" coords="165,334,198,348" href="http://www.apple.com/safari/" />
<area shape="rect" coords="213,334,321,349" href="http://www.microsoft.com/downloads/" />
<area shape="poly" coords="456,357,455,335,469,319,489,316,497,317,509,314,523,314,536,320,543,328,551,329,548,333,550,339,558,360,527,376,520,377,508,378,489,380,475,376" href="#" onClick="MM_openBrWindow('coming_soon.html','cs','resizable=yes,width=428,height=326')" />
</map>
</div>
</body>
</html>
Just for fun, you can specify the width and height of the img in CSS in percentages, so it varies with the browser window size, or in em, so it varies with the font size setting.
The code above still doesn't validate, but it is a lot simpler while giving the same results. You really do not need something like Dreamweaver for this kind of splash pages. You could even do away with the image map and just position an appropriately styled list of links over the background image.
