Set border to table tr, works in everything except IE 6 & 7

Question

I set the border for the table event_calendar tr to be red, it works in everything except IE 6 & 7. What is wrong with my CSS?

table#event_calendar tr {     border:1px solid red; }  <div class="content-body"> <table id="event_calendar">     <tr class="calendarHeader">         <th><div class="calendarMonthLinks"><a href="http://webdev.herkimer.edu/calendar/2009/03/">&lt;&lt;</a></div></th>         <th colspan="5"><h1>April 2009</h1></th>         <th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="http://webdev.herkimer.edu/calendar/2009/05/">&gt;&gt;</a></div></th>     </tr>     <tr>         <td class="calendarDayHeading">Sunday</td>         <td class="calendarDayHeading">Monday</td>         <td class="calendarDayHeading">Tuesday</td>         <td class="calendarDayHeading">Wednesday</td>         <td class="calendarDayHeading">Thursday</td>         <td class="calendarDayHeading">Friday</td>         <td class="calendarDayHeading">Saturday</td>     </tr> </table> </div> 

Answer 1

IE does not honor the border property for <tr> tags. However, there are workarounds by putting a top and bottom border around each cell, and using "border-collapse: collapse;" so there's no space between cells. I will refer to this resource here on the exact method, but it will essentially look like this for you (I haven't tested it myself, so I'm not sure if this is exactly right, but I think you can riff on it.)

table#event_calendar {     border-collapse: collapse;     border-right: 1px solid red;     border-left: 1px solid red; }  table#event_calendar td, table#event_calendar th {     border-top: 1px solid red;     border-bottom: 1px solid red; } 

Answer 2

Your CSS is sensible enough, but IE just doesn't do borders on tr elements. If you use this style you should get the intended result though:

table#event_calendar {     border-top:1px solid red;     border-right:1px solid red;     border-left:1px solid red;     border-collapse:collapse; }  table#event_calendar td, table#event_calendar th {     border-bottom:1px solid red;  }