views:

519

answers:

1

For this report created in HTML & CSS the left borders are disappearing in IE 7 & 6. They show up correctly in IE 8, Firefox, Chrome, Opera, etc.

I am applying the style with three different CSS classes:

.LeftBorder
{
    border-left: 1px solid black;
}
.LeftBorderHeadingShaded
{
    background-color: gray;
    color: black;
    text-align: left;
    font-weight: bold;
    border-top: 2px solid black;
    border-left: 1px solid black;
}
.noshadeLeftBorder
{
    background-color: white;
    border-left: 1px solid black;
}

And those classes are applied to specific TR and TD tags, but the left border fails to show up on any of those. Some of the bottom borders are missing to, but that isn't as big of a deal.

I made a screen shot showing IE 7, 6 and 8 side by side. I circled the problem area. Here is the full HTML/CSS.

Internet Explorer sucks at CSS

+2  A: 

EDIT:

Well that selector simply means "apply the properties to elements of the type td that are children of a tr element with the the class LeftBorder". If thats not right on to your structure i apologize for the confusion i only glanced at you code in fire bug and saw a tr with the class LeftBorder. Bottom line is though you need to be applying border to td and/or table... not tr.

Well first of all i dont think youre supposed to apply borders to a tr they are on the td so you need to target them like tr.LeftBorder td

prodigitalson
+1 Yup, `border` on a `tr` is definitely wrong.
Pekka
The solution was to apply the *LeftBorder* styles to the first **TD** in the **TR**. Of course some of those styles have other formatting too, but it will work.
Jim McKeeth