content width inside tables

This short example illustrates a problem calculating element content width
inside of a table.  the table is three columns. the second column wraps 
unneededly causing extra lines.  width of table allows more on line
view in any other browser to see expected results ... 
//

<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><title>John Russell's Education Page</title>
<style type="text/css">
body {background:#fdf5e6;color:#000;text-align:center;
  margin:0px;border:0px;padding:0px}
div {margin:0px;border:0px;padding:0px}
#main {background:#fff;color:#000;width:714px;height:100%;
  text-align:left;margin:auto;padding:15px 25px 5px}
h1 {font-size:200%;font-family:cursive;font-weight:bold;
  text-align:center;clear:both;display:block;
  margin:0px;margin-top:15px;border:0px;padding:0px}
p {text-align:left}
em {font-style:italic;font-weight:bold}
strong {font-weight:bold}
img {margin:0px;border:0px;padding:0px}
span {color:red;background:transparent;font-weight:bold}
table {margin:auto;border:0px;padding:0px}
tr {vertical-align:top}
td {width:auto;margin:0px;padding:1px 3px;
    border:1px solid green;text-align:left;vertical-align:top}
th {width:auto;margin-left:auto;margin-right:auto;padding:1px 3px;
    border:0px;text-align:center;vertical-align:top}
form {margin:10px auto;padding:10px;text-align:center}
button {padding:1px 3px;overflow:visible} /* IE 7 bug fix */
label {font-weight:bold;white-space:nowrap}
input {background:white;width:88px;height:20px;z-index:1;
  border:2px inset;padding-left:2px}
textarea {background:white;border:2px inset;padding:1px;font-weight:normal}
a {color:#000;text-decoration:underline;border:0px;font-weight:bold}
a:hover {color:red;text-decoration:none;border:0px}
td.nav {border:1px solid red;vertical-align:middle}</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" src="tip_form.js"></script></head>
<body><table><tr>
<td class="nav"><img src="images/zhome.gif" alt="icon"/></td>
<td><a href="home.htm">JR's HomePage</a> | <a href="#update">Updates</a> |
<a href="sitemap.htm">Site Map</a> | <a href="#bot">Page Bottom</a><br/>
<a href="#edit">Editorial Comment</a> | <a href="#hobby">Hobby Zone</a> |
<a href="#literacy">Literacy Zone</a></td>
<td class="nav">
<form action="" onsubmit="search_form('formdata');return false">
<div><input id="formdata" type="text"/>
<button onclick="search_form('formdata');">&raquo;</button></div></form>
</td></tr></table>
<h1>Testing Table Widths:VE3LL@RAC.CA</h1>
</body></html>
-- 
-- 
John Russell, VE3LL@COGECO.CA
http://home.cogeco.ca/~ve3ll
http://home.cogeco.ca/~trains
http://home.cogeco.ca/~cipher

Received on Tuesday, 18 August 2009 16:10:24 UTC