Lemon Garden

Blockquote Border Bug - Test Case

If you are using Internet Explorer (IE) you should be able to see the bug in action below. A paragraph is followed by a blockquote, itself containing a paragraph, followed by a final paragraph. Each paragraph element is coloured and has a solid black border.

In Internet Explorer 6, the text within the final paragraph is offset to the left. This appears to be caused by the presence of a left border on the blockquote element. The paragraph text is offset by the same amount as the width of the blockquote left border (i.e. 10px in this case). If you are not using IE then you can see the bug in this image.

If you remove the paragraph element from within the blockquote, the bug disappears. Unfortunately, this isn't always feasible as you may be quoting several paragraphs, which should be properly marked up with the paragraph element.

However, there is another way. If you apply a border to the bottom of the blockquote, that will also resolve the bug. Setting the colour of the border to the same as the background will effectively hide it. This is what we have done in the following example.

That, in a nutshell, is the blockquote border bug in IE. I only have access to IE6, so I don't know if the bug also exists in other versions of IE.

View the source of this page to see the underlying CSS behind this bug and the bug fix.