Welcome to WebmasterWorld Guest from 50.16.112.199

Forum Moderators: incrediBILL

Tables look different in firefox than ie6

   
6:09 am on Dec 4, 2005 (gmt 0)

5+ Year Member



Hi,

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

12:01 pm on Dec 4, 2005 (gmt 0)

10+ Year Member



I honestly didn't realize that anyone wrote HTML like this anymore. It brings tears to my eyes...

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>
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month