- From: fantasai <fantasai@escape.com>
- Date: Mon, 26 Nov 2001 20:59:39 -0500
- To: www-style@w3.org
Part A - Intra-Table Boundaries
image -
_____
|#### |
|//// |
|---- |
|```` |
ŻŻŻŻŻ
1 table row, "table {border-collapse: separate; border-spacing: 2unit;}" -
(ruler, 1unit intervals)
\
| |_________| |_________| |_________| | -
| | +
| _________ _________ _________ | -
| | | | | | | | +
| | | | | | | | -
| | | | | | | | +
| | | | | | | | -
| | | | | | | | +
| ŻŻŻŻŻŻŻŻŻ ŻŻŻŻŻŻŻŻŻ ŻŻŻŻŻŻŻŻŻ | -
| _________ _________ _________ | +
| | | | | | | | -
Given
<tr>
<td></td>
<td></td>
<td></td>
</tr>
and
tr {background: url(image) repeat-x;}
What is the rendering?
a) top of background area at full spacing -------------v
###### ###### ###### ###### ###### ###### ######
| |_________| |_________| |_________| | ___
| | #
| _________ _________ _________ | /
| |- ------ | | ------ -| |------ --| | -
| |` `````` | | `````` `| |`````` ``| | `
| | | | | | | |
| | | | | | | |
| | | | | | | |
| ŻŻŻŻŻŻŻŻŻ ŻŻŻŻŻŻŻŻŻ ŻŻŻŻŻŻŻŻŻ |
| _________ _________ _________ |
| | | | | | | | ŻŻŻ
b) top of background area at 1/2 spacing --------------v
###### ###### ###### ###### ###### ###### ######
| |_________| |_________| |_________| |
| | ___
| _________ _________ _________ | #
| |/ ////// | | ////// /| |////// //| | /
| |- ------ | | ------ -| |------ --| | -
| |` `````` | | `````` `| |`````` ``| | `
| | | | | | | |
| | | | | | | |
| ŻŻŻŻŻŻŻŻŻ ŻŻŻŻŻŻŻŻŻ ŻŻŻŻŻŻŻŻŻ |
| _________ _________ _________ | ŻŻŻ
| | | | | | | |
c) top of background area at top of 1st cell ----------v
###### ###### ###### ###### ###### ###### ######
| |_________| |_________| |_________| |
| |
| _________ _________ _________ | ___
| |# ###### | | ###### #| |###### ##| | #
| |/ ////// | | ////// /| |////// //| | /
| |- ------ | | ------ -| |------ --| | -
| |` `````` | | `````` `| |`````` ``| | `
| | | | | | | |
| ŻŻŻŻŻŻŻŻŻ ŻŻŻŻŻŻŻŻŻ ŻŻŻŻŻŻŻŻŻ | ŻŻŻ
| _________ _________ _________ |
| | | | | | | |
d) none of the above
Similarly, how is the background area defined for columns?
=============================================================
Part B - Cells That Sit the Fence
image_w - image_b -
_______ _______
|` | |#%%%%%%|
| ` | |%%%%#%%|
ŻŻŻŻŻŻŻ ŻŻŻŻŻŻŻ
HTML -
<tr class="a">
<td>content</td>
<td rowspan="2">AB</td>
<td>content</td>
</tr>
<tr class="b">
<td>content</td>
<td>content</td>
</tr>
CSS -
[rowspan] {
font-size: x-large
}
Rendering -
___________________________________
| | ## ### | |
| content | # # # # | content |
|_________| #### #### |_________|
| | # # # # | |
| content | # # #### | content |
| | | |
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
CSS -
[rowspan] {
font-size: x-large
}
.a {
background: url(image_w);
color: black;
}
.b {
background: url(image_b);
color: white;
}
Rendering?
A)
___________________________________
|` ` | ## ###` | ` |
| content |` # # `# # `| content |
|`______`_| #### #### |__`______|
|#%%%%%%#%|%%#%##%%#%%##%%|%%#%%%%%%|
|%content%|#%#%%#%#####%%#|%content%|
|#%%%%%%#%|%%%%#%%%%%%#%%%|%%#%%%%%%|
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
B)
___________________________________
|` ` | ## ###` | ` |
| content |` # # `# # `| content |
|`______`_| #### #### |__`______|
|#%%%%%%#%|` # # # # |%%#%%%%%%|
|%content%| # `# #### |%content%|
|#%%%%%%#%|` ` `|%%#%%%%%%|
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
c) Neither A nor B
========================================================
Part C - Bleeding Canvas
Seem to have overlooked a consequence of painting backgrounds
in the border area:
image -
________________________________________________
|########//##////////~~//~~~~~~~~``~~```````` ``|
|######//##////////~~//~~~~~~~~``~~```````` `` |
|########//##////////~~//~~~~~~~~``~~```````` ``|
|##//##//##////////~~//~~~~~~~~``~~```````` `` |
|//##//##//##////////~~//~~~~~~~~``~~```````` ``|
|##//##//##////////~~//~~~~~~~~``~~```````` `` |
|////////////////////~~//~~~~~~~~``~~```````` ``|
|//////////////////~~//~~~~~~~~``~~```````` `` |
|////////////////////~~//~~~~~~~~``~~```````` ``|
|//~~//~~//~~//~~//~~//~~~~~~~~``~~```````` `` |
|~~//~~//~~//~~//~~//~~//~~~~~~~~``~~```````` ``|
|//~~//~~//~~//~~//~~//~~~~~~~~``~~```````` `` |
|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~```````` ``|
|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~```````` `` |
|~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~```````` ``|
|~~``~~``~~``~~``~~``~~``~~``~~``~~```````` `` |
|``~~``~~``~~``~~``~~``~~``~~``~~``~~```````` ``|
|~~``~~``~~``~~``~~``~~``~~``~~``~~```````` `` |
|```````````````````````````````````````````` ``|
|`````````````````````````````````````````` `` |
|```````````````````````````````````````````` ``|
|`` `` `` `` `` `` `` `` `` `` `` `` |
| `` `` `` `` `` `` `` `` `` `` `` ``|
|`` `` `` `` `` `` `` `` `` `` `` `` |
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
Block, "border: 2units dotted;" -
[][] [][] [][] [][] [][] [][] [][]
[][] [][] [][] [][] [][] [][] [][]
[][] [][]
[][] [][]
[][] [][]
[][] [][]
[][] [][]
[][] [][]
[][] [][] [][] [][] [][] [][] [][]
[][] [][] [][] [][] [][] [][] [][]
Block, "border: 2units dotted; background: url(image) no-repeat;" -
Rendering with Errata (including border area) -
[][] [][] [][] [][] [][] [][] [][]
[][] [][] [][] [][] [][] [][] [][]
########//##////////~~//~~~~~~~~``~~```````` ``
######//##////////~~//~~~~~~~~``~~```````` ``
[][]########//##////////~~//~~~~~~~~``~~````````[][]
[][]##//##//##////////~~//~~~~~~~~``~~```````` [][]
//##//##//##////////~~//~~~~~~~~``~~```````` ``
##//##//##////////~~//~~~~~~~~``~~```````` ``
[][]////////////////////~~//~~~~~~~~``~~````````[][]
[][]//////////////////~~//~~~~~~~~``~~```````` [][]
////////////////////~~//~~~~~~~~``~~```````` ``
//~~//~~//~~//~~//~~//~~~~~~~~``~~```````` ``
[][]~~//~~//~~//~~//~~//~~//~~~~~~~~``~~````````[][]
[][]//~~//~~//~~//~~//~~//~~~~~~~~``~~```````` [][]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~```````` ``
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~```````` ``
[][]~~~~[][]~~~~[][]~~~~[][]~~~~[][]``~~[][]````[][]
[][]~~``[][]~~``[][]~~``[][]~~``[][]~~``[][]`` [][]
Rendering without Errata (assumed excluding border area) -
[][] [][] [][] [][] [][] [][] [][]
[][] [][] [][] [][] [][] [][] [][]
########//##////////~~//~~~~~~~~``~~````````
######//##////////~~//~~~~~~~~``~~````````
[][]########//##////////~~//~~~~~~~~``~~````````[][]
[][]##//##//##////////~~//~~~~~~~~``~~```````` [][]
//##//##//##////////~~//~~~~~~~~``~~````````
##//##//##////////~~//~~~~~~~~``~~````````
[][]////////////////////~~//~~~~~~~~``~~````````[][]
[][]//////////////////~~//~~~~~~~~``~~```````` [][]
////////////////////~~//~~~~~~~~``~~````````
//~~//~~//~~//~~//~~//~~~~~~~~``~~````````
[][]~~//~~//~~//~~//~~//~~//~~~~~~~~``~~````````[][]
[][]//~~//~~//~~//~~//~~//~~~~~~~~``~~```````` [][]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~````````
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~````````
[][] [][] [][] [][] [][] [][] [][]
[][] [][] [][] [][] [][] [][] [][]
Quite frankly, I prefer the second rendering to the first. It doesn't look
so messy, as if the image were bleeding through two edges of the box.
CSS Spec:
http://www.w3.org/TR/REC-CSS2/tables.html#table-layers
http://www.w3.org/TR/REC-CSS2/colors.html#background-properties
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html
Regards,
fantasai
Received on Monday, 26 November 2001 20:56:58 UTC