« Share your RSS subscriptions with the world | Main | Good reference on use of treemaps in user interface design »

IE5 & IE6 blockquote with border CSS bug workaround

There’s an IE5 & IE6 cascading style sheet (CSS) bug affecting the “AnotherEon001” skin.

The bug is visible if a post contains a “blockquote” element which contains a “P” element.

What you’ll see is all the text following the “div” containing the “blockquote” will be shifted to the left from where it should have been.

The trigger for the bug is the “border-left” style applied to the “blockquote”.

Alternatives to avoid the bug:

1.      Remove the “border-left” style.

2.      Add a “border-bottom” style of equal width. Make it match the background if you don’t want to see it.

3.      Eliminate the “padding” style from the “blockquote”.

4.      Somehow arrange for the text within the “blockquote” not to contain any “p” elements J

Thanks for the insight into the bug goes to this link.

Posted by Tone Engel on January 11, 2004 10:11 AM |

Comments

Fantastic! I was playing around with the different skins of .Text tonight for my blog and I came across AnotherEon001. It looked great with Firefox, but when I tried it with IE6, it was horrible. I do have several items where I have used "blockquote". I just spent the last 90 minutes cleaning everything up and it now looks great in both browsers.

Thanks for an excellent post!

Posted by: Kerry Sanders | March 20, 2005 12:12 AM

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)