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; }