So I'm uploading my IE6 mouseover report to my blog and I notice this:
The bottom borders of every one of my blog entry titles is shorter than it should be. And I only see this in IE.
The problem is not limited to A(nchor) elements inside H2 elements inside DIV elements. It occurs for any A element inside a block element that inherits a non-zero letter-spacing value and appears immediately after a top-borderless DIV element.
Let me try that again: the DIV must contain a block element (H2, H3, P) that contains an anchor (A) element. The problem appears
- When the block element is the first element inside the DIV
- The DIV must have a border but not have a top border (any combination of left, right, and bottom)
- The block element must have a non-zero letter spacing value (negative or positive)
and it is most prominent when the font family is a monospaced font, though this is not a factor in recreating the rendering anomaly.
Granted, this is a rare case and planets need to align. Several ways for this NOT to happen
- remove the DIV
- remove the DIV border
- give the DIV a top border
- remove line-spacing property or set it to zero
- put anything between the DIV and the H2/block element
- move the letter-spacing property to the A element rather than the H2 element.