tags:

views:

3039

answers:

3

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/"&gt;&amp;lt;&amp;lt;&lt;/a&gt;&lt;/div&gt;&lt;/th&gt;
     <th colspan="5"><h1>April 2009</h1></th>
     <th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="http://webdev.herkimer.edu/calendar/2009/05/"&gt;&amp;gt;&amp;gt;&lt;/a&gt;&lt;/div&gt;&lt;/th&gt;
    </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>
A: 

Change your CSS selector to "table#event_calendar tr td" and it should work.

David
Then he'll get borders on the side of each cell, which is no good.
Daniel Lew
+9  A: 

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;
}
Daniel Lew
you can see it applied to the HTML here - http://jsbin.com/olevu
Russ Cam
+2  A: 

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;

}
Thomas Petersen
Oops, I forgot to handle the "th" tags. I hope you don't mind me updating my post to reflect my mistake.
Daniel Lew