table row - border on the bottom

I would like my table header to have a border on the bottom. What I
have written works in Mozilla (1.7.12) but not IE (6).

I have included the snippet of html and the snippets of CSS. Any
suggestions would be appreciated. Thank you.

http://www1.esc.edu/personalstu/fhartnet/books.html


<tr class="lightblue">
<th>Title</th>
<th>Author</th>
<th>Synopsis</th>
</tr>

table {border-collapse: collapse;
table-layout: auto;
width: auto;}

tr.lightblue{
background-color: #CCFFFF;
color: black;
font-weight: bold;
font-family: sans-serif, serif;
font-size: 18px;
caption-side: top;
padding: 5px;
border-bottom: 5px solid black;
}

eomer wrote:

I would like my table header to have a border on the bottom. What I
have written works in Mozilla (1.7.12) but not IE (6).
[snip]
tr class="lightblue"
th>Title</th
th>Author</th
th>Synopsis</th
/tr

table {border-collapse: collapse;
table-layout: auto;
width: auto;}

tr.lightblue{
[snip]
border-bottom: 5px solid black;
}

You need to put the border on the bottom of the <th>s.
tr.lightblue th{
border-bottom:5px solid black;
}

(not because of that being the right way according to the specs, but
because IE won't do it otherwise ;-) )

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Thank you so much!
I just love these differences between the browsers.