Delete Tag Browser Differences

8th April 2004 · Last updated: 5th October 2016
 

Comments

Here is an illustration of the differences visible when using the <del> tag in the three main Windows browsers - Mozilla 1, Opera 7 and IE6. I noticed in a recent post I made that the horizontal line denoting deleted text was not hitting the same spot in each browser. If you look at the screenshot below, the example line that uses the Arial font shows the following discrepancies: Mozilla, the leftmost browser shown, uses a low line to delete text. (Look at the letter "e" and the dash at the end.) In Opera, the middle browser shown, the same font is ruled through the middle of the lower-case characters. (Compare the "e" and dash again.) Now look at IE, where the line is the highest. So there is a progression from low to middle to high!

Example Screenshot

Now view the source code I wrote to produce these results, or view the test yourself. Notice anything unusual?

I wanted to line up the deleted text vertically, but my use of font names at the start of each line left the text higgledy-piggledy. So I found a simple solution:

del {position:absolute; left:96px;}

This is one way to avoid using tables! The only problem was that the deleted text was now a few pixels too high. In the end I adjusted each line separately to line it up with the font name.

There are many ways I could have coded such a task. I might have used definition lists, for example. Yet this could be a technique for avoiding tables that is worth investigating further. (Of course in hindsight I could have used a couple of horizontally aligned divs.)

Notes

1. Increasing the text size in Mozilla ruins the alignment of my font names and deleted text.
2. Oddly, my use of positioning on the <del> tags knocks out the deletion line in Opera 7. (I used a second version of the code without font names for the screenshot.) The page validates as HTML 4.01 Strict, so I guess my code is not quite ordered properly.
3. Line-heights were adjusted for Opera and IE to match Mozilla when preparing the screenshot.
4. The Times font was increased to 110% to match the other fonts more closely in size.
5. In IE6, the Times font had to be reduced in size by 1% to prevent an ugly thick line being used for deletion.