Question

I have been trying to solve this style problem for the whole day, but in vain.

http://jsfiddle.net/9HP9Q/1/

The table lines must have gray borders around them. It works fine on all browsers except Internet Explorer 8.

.order_table table {
  border-collapse: collapse;
}
.order_table table tbody tr {
   border: 1px solid #DEDEDE;
}

It does indeed give border to the whole table, except the first <TD> but then I tried forcing it using

.order_table table td.product_format {
  border-bottom: 1px solid #DEDEDE;
  border-top: 1px solid #DEDEDE;
}

But it did not work. Can anybody guide me to the right way?

Answer 1

The problem:

.order_table table tbody tr {
   border: 1px solid #DEDEDE;
   //IE put the background color upside the border
   background-color: #FAFAFA;
}

The solution:

.order_table table tbody tr {
   border: 1px solid #DEDEDE;
   //Deleted the background-color
}

Working example:

http://jsfiddle.net/9HP9Q/2/