Hello,

I generate difference documents where differences are marked with green (insertions) or red (deletions) borders.
For better readability of the printout (red and green look very similar when converted to gray scale), I want to mark all deleted sections with a small extra icon

(sections are: div and tr (table row) elements)

When applying the following style to a table row, a (empty) table cell is inserted and all other cells in the same row are shifted to the right:

	tr.delete:before {
		content: url("../pics/delete16.png");
		position: absolute; left: -1.5em;
	}

Nothing changes when the property 'display:inline' is added.

This code works as expected:

	tr.delete td:first-child:before {
		content: url("../pics/delete16.png");
		position: absolute; left: -1.5em;
	}

I don't know wheter this is a bug, but what is the reason for inserting an extra table cell in the first case?

- - -
Johann

In the first case, the content in the table row is wrapped up in a new table cell before the absolute positioning is processed. I'm not 100% sure if that is correct or not, but your second solution is a good workaround either way.