CODEWITHSUNDEEP
htmlcsshtml-table
panchicore
panchicore

Reputation: 11922

css border-bottom iexplorer

css:

.item_fact{
     border-bottom:#CCCCCC 1px solid;
}

html:

<table>
  <tr class="item_fact">
    <td> hello </td>
    <td> world </td>
  </tr>
</table>

IE7 does not display the border-bottom, but Firefox and Chrome does! How can I hack this css?

Upvotes: 1

Views: 956

Answers (2)

cdm9002
cdm9002

Reputation: 1960

Borders on rows are not supported in IE/css. You need to border the cells.

.item_fact td {
  border-bottom:1px solid #ccc;
}

Upvotes: 0

Matt
Matt

Reputation: 44058

the correct css syntax would be:

border-bottom: size style color;

So, in your case:

border-bottom: 1px solid #CCCCCC;

edit: actually, it seems TR doesn't act like it 'contains' the TD elements in IE7. One trick you can do is have the table collapse borders, then apply all TDs under .item_fact to have the border-bottom themselves.

Like this:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
}
.item_fact td {
     border-bottom:1px solid #CCCCCC;
}
</style>
</head>
<body>
<table>
  <tr class="item_fact">
    <td> hello </td>
    <td> world </td>
  </tr>
</table>
</body>
</html>

Upvotes: 4

Related Questions