XHTML TABLES: How do I successfully resolve differing IE8 & Firefox Displays

HTML & CSS
1

“Rules” and “Frames” attributes within <table> tags

Firefox, Safari, Flock, Chrome, Netscape, and Opera display what could best be called the “internal horizontal rules” as the color “black” that border the bottom of each row. This is the desired outcome

IE8, Maxthon and Avant show the color as “white”. I do not want the XHTML code to display like this

How do I resolve this?

Thank You

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”>
<html>

<head>
<title>Optional Adventure Trips </title>

<style type=“text/css”>
body {font-family: verdana;
background-color: white;}

th {background-color: black;
color: white;
padding: 4px;}

td {padding: 4px;}

#first {background-color: #999;}
#second {background-color: #ccc;}

.center {text-align: center;}

.uppercase {text-transform: uppercase;}
</style>

</head>

<body>
<h1>Optional Adventure Trips </h1>
<p>Each summer, we schedule several optional adventure trips that campers find exciting and rewarding. The trips always provide memorable experiences. You can participate in as many or as few trips as you’d like, as long as none conflict with each other. Trips vary in length and are planned for the abilities of the participating campers.</p>

<table rules=“rows” frame=“box”>

<colgroup id=sessions">
<col id=“first”></col>
<col id=“second”></col>
</colgroup>
<colgroup id=“trip-details”>
<col id=“type”></col>
<col id=“duration”></col>
<col id=“location”></col>
</colgroup>

<tr class=“uppercase”>
<th colspan=“2”>SESSIONS</th>
<th colspan=“3”>TRIP DETAILS</th>
</tr>

<tr> <th>1st</th>
<th>2nd</th>
<th>Type</th>
<th>Duration</th>
<th>Location</th>
</th>
</tr>

<tr>
<td class=“center”>X</td>
<td class=“center”></td>
<td>Canoeing</td>
<td>2 days</td>
<td>Kennebec River</td>
</tr>

<tr> <td class=“center”>X</td>
<td class=“center”></td>
<td>Canoeing</td>
<td>4-5 days</td>
<td>Allagash River</td>
</tr>

<tr>
<td class=“center”></td>
<td class=“center”>X</td>
<td>Canoeing</td>
<td>4 days</td>
<td>Moose River</td>
</tr>

<tr>
<td class=“center”>X</td>
<td class=“center”>X</td>
<td>Kayaking</td>
<td>2 days</td>
<td>Kennebec River</td>
</tr>

<tr>
<td class=“center”>X</td>
<td class=“center”>X</td>
<td>White Water Rafting</td>
<td>1 day</td>
<td>Kennebec River</td>
</tr>

<tr>
<td class=“center”>X</td>
<td class=“center”></td>
<td>Biking</td>
<td>3 days</td>
<td>Acadia National Park</td>
</tr>

<tr>
<td class=“center”></td>
<td class=“center”>X</td>
<td>Mountain Biking</td>
<td>3 days</td>
<td>Carrabasset Valley</td>
</tr>

<tr>
<td class=“center”></td>
<td class=“center”>X</td>
<td>Hiking</td>
<td>3 days</td>
<td>Baxter State Park</td>
</tr>

<tr>
<td class=“center”>X</td>
<td class=“center”></td>
<td>Hiking</td>
<td>3 days</td>
<td>Mount Washington</td>
</tr>

<tr>
<td class=“center”>X</td>
<td class=“center”>X</td>
<td>Sightseeing</td>
<td>3 days</td>
<td>Quebec City</td>
</tr>

<tr>
<td class=“center”>X</td>
<td class=“center”>X</td>
<td>Fishing</td>
<td>1 day</td>
<td>Maine Coast</td>
</tr>

<tr>
<td class=“center”></td>
<td class=“center”>X</td>
<td>Whale Watching</td>
<td>1 day</td>
<td>Maine Coast</td>
</tr>

<tr>
<td class=“center”>X</td>
<td class=“center”>X</td>
<td>Sailing</td>
<td>2 days</td>
<td>Maine Coast</td>
</tr>
</table>

</body>

</html>

2

Have you tried something like: table { border-collapse: collapse; } I think that is what effect you are after.

3

It is not displaying any differently at all in IE8, Maxthon or Avant.

Thanks for taking a stab at it, though

4

Don’t use rules or frame attributes. Use CSS.

table { border-collapse:collapse; border:1px solid black }
td { border-bottom:1px solid black }
5

Thank you, zcorpan… it is now displaying correctly in all browsers

6

Sorry, I forgot to mention you should have added the table’s borders via CSS to and not bothered with the “rules” and “frame” like Simon pointed-out - that’s what happens when I post whilst asleep.