IE and dotted border.. - color "between dots" should be color of cell - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

IE and dotted border.. - color "between dots" should be color of cell

dotted tableborder showing bg-color of table instead of bg-color of cell

Jeeek

1:22 pm on Dec 23, 2004 (gmt 0)

got this table, where the head should be light blue + dotted border, rest of the table is another color + dotted border.
would be great if IE would show the space between the dots of the border in the same color as the tableheader, instead of showing the table-background-color/bgcolor of body..

Moz, opera are doing fine, but IE...

so here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
table {font-size:12px;
border-collapse: collapse;
empty-cells:show;
background-color:blue;
}
td {margin:0;
text-align:center;
border:3px dotted #ffffff;
}
th {border:3px dotted #ffffff;
background-color: #EFF7FF;
}
</style>
</head>
<body>
<table>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
</table>
</body>
</html>

any workaround/Tip to do it right?

SuzyUK

2:12 pm on Dec 23, 2004 (gmt 0)

it's just the browsers rendering differences but there is a workaround, supply different CSS to IE.

For all styles...
change the background of the table to white.. make the <td> background blue, and keep the <th> background light blue, keep the border color white

For IE styles (override using either a hack or conditional comment)
make the border-color for the <th> and <td> the same color as the their respective backgrounds. The white table background and colored borders should create the same effect as you're seeing in FF/opera

Suzy

Jeeek

1:40 pm on Dec 29, 2004 (gmt 0)

arr nice - thank you;

just a little addition:

if I follow your advice, I got a kind of strange looking border (it just looks like what it is - an inverted dotted border);

so after tweaking a bit I got a really good result:
making the border dashed instead of dotted, I got rid of the "fringy" look;
reducting the size to 2 instead of 3 gives a really good result - so here's what I got now (for the ones interested..):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
table {font-size:12px;
border-collapse: collapse;
empty-cells:show;
background-color:blue;
}
td {margin:0;
text-align:center;
border:3px dotted #ffffff;
}
th {border:3px dotted #ffffff;
background-color: #EFF7FF;
}
</style>

</head>
<body>
<table>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>something</td>
<td>something</td>
</tr>
</table>
</body>
</html>