Forum Moderators: open
Would someone be able to paste the below html into a file and open it with firefox and ie6. Why do the firefox tables look 3d and grid like and the ie6 tables look flat like they are supposede to.
<html>
<table width=100% bgcolor=#F5F5F5 border=1 BORDERCOLOR=#D6D6D6
cellpadding=5 cellspacing=5 style=position:relative;top:3px;>
<tr>
<td width=100% bgcolor=#EDEDED>
<b>Buyer Details:</b><br>
Name: <span style=position:relative;left:45px;>
<a href=profile.php?id=$id><b>$dname</b></a></span><br>
Location: <span style=position:relative;left:33px;color:black;> $city, $state, $country</span><br>
Joined:<span style=position:relative;left:43px;color:black;> $joined</span><br><br>
Project #: <span style=position:relative;left:30px;color:black;>$pid</span>
<br>Category: <span style=position:relative;left:29px;color:black;>$category</span><br>
Subcategory:<span style=position:relative;left:10px;color:black;> $subcategory</span><br><br>
Title:<span style=position:relative;left:57px;color:black;> $title</span><br><br><br>
<span style=position:relative;top:-9px;>Description:</span> <p id=description>"; echo nl2br($description);echo "</p>
Skills:<span style=position:relative;left:50px;color:black;> $skills</span><br>
Budget:<span style=position:relative;left:40px;color:black;> $budget</span><br>
Deadline: <span style=position:relative;left:29px;color:black;>$deadline</span>
</td>
</tr>
</table>
<html>
Thanks
If you're expecting consistent use of borders on tables between browsers, think again. It's usually possible to hack something into existence, but that's what CSS and border are for.
Tips:
- Choose and use a DOCTYPE [htmlhelp.com]
- Validate your code [validator.w3.org]
- Read the CSS specification [w3.org]
- For heaven's sake, think about what you're writing
I suggest something along these lines (apologies for the lack of tabbing -- the indentation was stripped by the forum).
Fiddle about as necessary to achieve the desired border effects, with reference to the CSS specification re tables [w3.org].
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Demo Table</title>
<style type="text/css">
table {border: thin solid black; width: 100%; }
td{padding-right: 5px; }
th{width: 8em; font-weight: bold; text-align: right; padding: 0 5px 0 5px; }
caption{font-weight: bold; text-align: center; }
.category .toprow th, .project .toprow th, .technical .toprow th {padding-top: 1em; }
.category .toprow td, .project .toprow td, .technical .toprow td {padding-top: 1em; }
</style>
</head>
<body>
<table>
<caption>Buyer Details</caption>
<tbody class="personal">
<tr class="toprow">
<th>Name:</th>
<td>(dname)</td>
</tr>
<tr>
<th>Location:</th>
<td>(city) (state) (country)</td>
</tr>
<tr>
<th>Joined:</th>
<td>(joined)</td>
</tr>
</tbody>
<tbody class="category">
<tr class="toprow">
<th>Project #:</th>
<td>(pid)</td>
</tr>
<tr>
<th>Category:</th>
<td>(category)</td>
</tr>
<tr>
<th>Subcategory:</th>
<td>(subcategory)</td>
</tr>
</tbody>
<tbody class="project">
<tr class="toprow">
<th>Title:</th>
<td>(title)</td>
</tr>
<tr>
<th>Description:</th>
<td>(description)</td>
</tr>
</tbody>
<tbody class="technical">
<tr class="toprow">
<th>Skills:</th>
<td>(skills)</td>
</tr>
<tr>
<th>Budget:</th>
<td>(budget)</td>
</tr>
<tr>
<th>Deadline:</th>
<td>(deadline)</td>
</tr>
</tbody>
</table>
</body>
</html>
