Forum Moderators: not2easy
i.e.
table { border: 1px; border-style: solid; border-color :#3399FF; }
td {border: 1px; border-style: solid; border-color :#CCCCCC;}
gives a table colour of #CCCCCC instead of #3399FF
Is there some other css that might be interfering?
Do you see the problem occur at the basic level of
<table><tr><td>Hello World</td></tr></table>
with only the css you posted? (I didn't)
ok the problem is if i collapse the border in css then where the table border in ie still takes the tale border reference in firefox is not using it at all....is there a work around for that?
<html>
<head>
<style type="text/css">
table { border: 1px; border-style: solid; border-color :#3399FF; border-collapse: collapse; }
td {border: 1px; border-style: solid; border-color :#CCCCCC;}
</style>
</head>
<body>
<table><tr><td>Hello World</td></tr></table>
</body>
</html>
[w3.org ]
The following rules determine which border style "wins" in case of a conflict:1. Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
2. Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)
3. If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.
4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. It is undefined which color is used when two elements of the same type disagree.
To see this in action (and a solution to your problem):
<table style="border-collapse: collapse; border: 3px solid #39f;">
<tr style="border: 2px solid #f0f;"><td style="border: 1px solid #ccc;">Hello World</td>
<td style="border: 1px solid #ccc;">Hello World</td>
<td style="border: 1px solid #ccc;">Hello World</td></tr>
<tr style="border: 2px solid #00f;"><td style="border: 1px solid #ccc;">Hello World</td>
<td style="border: 1px solid #ccc;">Hello World</td>
<td style="border: 1px solid #ccc;">Hello World</td></tr>
</table>
The <table> border is largest so will be displayed. The <tr> border between the <td>s is next largest so will show and then the remaining <td> borders are shown. IE gets this mostly right in most versions.
As you are not using <tr> borders leave the <td> borders at 1px and size the <table> border to 2px.
4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table.It is undefined which color is used when two elements of the same type disagree.
Please note that if for example you have mutiple rows of <td>s and the style and size are the same but the various sides of the <td>s are each a different colour the browsers differ in which colour (or border side?) has precedence.
Something to keep in mind in a complex design.
In Opera the following displays the red left borders between the <td>s while Firefox displays the blue right borders.
<table style="border-collapse: collapse; border: 2px solid #39f;">
<tr>
<td style="border: 1px solid #ccc; border-left-color:#f00; border-right-color:#00f;">Hello World</td>
<td style="border: 1px solid #ccc; border-left-color:#f00; border-right-color:#00f;">Hello World</td>
<td style="border: 1px solid #ccc; border-left-color:#f00; border-right-color:#00f;">Hello World</td>
</tr>
<tr>
<td style="border: 1px solid #ccc; border-left-color:#f00; border-right-color:#00f;">Hello World</td>
<td style="border: 1px solid #ccc; border-left-color:#f00; border-right-color:#00f;">Hello World</td>
<td style="border: 1px solid #ccc; border-left-color:#f00; border-right-color:#00f;">Hello World</td>
</tr>
</table>
as my td borders collapse setting to inset displays as solid while the table border colour displays as i wanted.
Thanks for your time.
To see this in action (and a solution to your problem):<table style="border-collapse: collapse; border: 3px solid #39f;">
<tr style="border: 2px solid #f0f;"><td style="border: 1px solid #ccc;">Hello World</td>
Hm.... This is not a 'solution' if the spec is a 1-pixel solid border on both the table and the cells.
How can I get this in an efficient manner?
"A black-border table with blue-border cells inside."
This is an extremely simple concept. From what I read above, it seems that this is not possible with CSS. Something's wrong here.
Is there really no way to specify this extremely basic case with some simple CSS?
Edit:
Ok, this is what I tried to work around it:
Set the table border "border-style: hidden;", which according to the spec then will override the cells and display no border.
Wrap the thing in a div tag with a "border: 1px solid black" and it displays like I wanted it to. One more div tag than I wanted, but that's not really the end of the world.
Problem is... IE doesn't seem to support the "border-style: hidden;" properly, so I'm pretty much back to where I started.
