For this report created in HTML & CSS the left borders are disappearing in IE 7. 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.

Unfortunately that little screen shot doesn't effectively show what it looks like in IE7. I made a screen shot showing IE 7 and IE 8 side by side. I circled the problem area.

Internet Explorer sucks at CSS

3 answers

Mottie 1134
2
points
This was chosen as the best answer

IE6 doesn't recognize border definitions for table rows <tr>... this blog post doesn't explain the bug, but shows how to fix it if you add a border bottom.

So, you will have to add your LeftBorder class to the first <td> in that row.

Answered almost 7 years ago by Mottie
0
points

Post an example

Answered almost 7 years ago by scott romack
  • Check the resources to the right of the question for a link to the full source referenced. Jim McKeeth almost 7 years ago
0
points

Hey another solution could be to add a style to the actual table.

So for example:

`<table style="1px solid #000;">`

This will then add a border around the entire table. I recommend just adding a class and adding the style in your style sheet.

I also noticed you have a bunch of styles already for left and right borders, remove them for now and then add the style border to any table you have in your code.

Hope that helps.

  • Juan
Answered almost 7 years ago by Juan Di Diego