Page is a not externally linkable
lucy24 - 8:40 pm on Sep 19, 2012 (gmt 0)
Overlapping Paul, above, so we may be repeating ourselves
Ooh, outlines, whole nother kettle of fish :) Depending on situation, they can be absolutely exactly what you want-- or a total disaster. One variable is browser compatibility, so make sure you test thoroughly.
Outlines can be especially spiffy with spans, because unlike borders, an outline draws a single line all the way around the complete text block. If, ahem, your browser cooperates.
:: off to experiment, because I have never tried outlining a table cell ::
CSS
table {border-collapse: collapse;}
td {border: 1px solid black; padding: .5em;}
td.forward:hover {outline: 2px dotted red}
td.halfway:hover {outline: 1px solid red}
td.fatline:hover {outline: 4px solid #99F;}
HTML ("quirks" mode, bare <html> with nothing else)
<table>
<tr>
<td class = "forward">text text text text text text text text text text text text text text text</td>
<td class = "halfway">text text text text text text text text text text text text text text text</td>
<td class = "fatline">text text text text text text text text text text text text text text text</td>
</tr>
<tr>
<td class = "fatline">text text text text text text text text text text text text text text text</td>
<td class = "forward">text text text text text text text text text text text text text text text</td>
<td class = "fatline">text text text text text text text text text text text text text text text</td>
</tr>
<tr>
<td class = "fatline">text text text text text text text text text text text text text text text</td>
<td class = "halfway">text text text text text text text text text text text text text text text</td>
<td class = "forward">text text text text text text text text text text text text text text text</td>
</tr>
</table>
Camino will only recognize the hover if I include the element name: td.forward etc rather than .forward alone. This is a good habit anyway. MSIE 5 [insert guffaws ad lib] won't recognize it at all. But then, it also ignores my explicitly stated "border-collapse: collapse".
Here is the tiny but crucial difference. Someone may want to see how MSIE behaves.
In Opera and in webkit-based browsers, the outline will go outside the top and left table-cell borders, but will cover the right and bottom borders. (This is why I tried different types of outline.)
In Mozilla-based browsers (Firefox and Camino), the outline will cover the cell border on all four sides.