# Table percentages in Safari doesn't work



## ThickAir (Aug 26, 2005)

For some reason safari doesn't like it when dreamweaver tables use percentages. I don't know why this is since every other browser supports it. Is there a work around for this because it's a real pain that the browser of the OS I develop web sites on doesn't even support my damn tables.

I'm running OS X 10.3.9 Dreamweaver MX 2004 and Safari 1.3(v312)

Thanks


----------



## Cat (Aug 26, 2005)

AFAIK Safari fully supports percentage widths on any and all elements ... could you post a snippet of the code that is giving you trouble?


----------



## ThickAir (Aug 26, 2005)

I'm making the tables in dreamweaver, I'm not writing the code by hand. Below is an excerpt from the body code from the HTML document. In INternet Explorer it works fine as always, but ever since I've used safari it doesn't handle percentages right, unless you have to code them differently.

check the actual html document at http://www.offtherackpro.com/

<table width="100%" height="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle">&nbsp;&nbsp;<br>
      <br>
      <br>
      <img src="images/OTRP_splash3.jpg" width="708" height="542" border="0" usemap="#Map"></td>
  </tr>
</table>


----------



## Cat (Aug 27, 2005)

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.


----------



## ThickAir (Sep 8, 2005)

this was one example for a splash page, but when creating HTML sites tables are the easiest thing for me and I'd rather stick to using them and not have to start messing with CSS code, even though that can help position an image. Besides, even when I make flash sites, it is very easy to create a table that fills the page, drop in my flash movie, adjust some meta data and it's done.

I don't understand why why safari doesn't seem to handle percentages, even if it's a glitch on my G5. I noticed Firefox and Mozilla are acting just like safari. Only IE 5.2 seems to display my tables that use percentages. I'm going to seek some help no Macromedia's forums. THey may know an easy fix. Thanks


----------



## texanpenguin (Sep 11, 2005)

Safari fully supports the standards when it comes to centring content (though the CSS property "vertical-align" is sketchy at best).

Often, though, the standards declare things not the "right" way to do things. You can throw Safari into Quirks mode if you don't declare a correct doctype.

Try your site on another computer. Perhaps you have a very old version of Safari? Try Software Update?


----------

