Pullquotes That Really Pull

The most impressive thing about pullquotes is people read em!

I'm using the 'Alternate Box Model Hack #3 to 'dumb-down' the rendering in Internet Explorer 5 and 5.5. There is a full explanation of this technique (and others) at CSS-Discuss.

In simplest terms, most modern browsers correctly understand the '!important' declaration and give the first rule priority because of it.

However IE5 and IE5.5 ignore the '!important' declaration and incorrectly allow the second rule to overwrite the first rule. We take advantage of this error by clearing the graphic and resetting the padding with that second rule. IE6 would unfortunately normally do exactly the same, but luckily a magical rendering bug triggered by the comment tags immediately before the colon means it ignores the second rule. Ah,.. When bad things break nice.

Note: I had to use the longhand syntax for 'background' in the Design View Newsletter (for formatting reasons). I've combined those 3 background rules into a single shorthand rule below to make this simpler.

.pullquote {
	width: 20%;
	float:right;
	font-size:125%;
	line-height:140%;
	margin:10px;
	background: url(closequote.gif) no-repeat bottom right !important;
	background /**/:url(); /* removing quote graphic in IE5+ */
	padding:0px 25px 5px 0px;
}
.pullquote:first-letter {
	background: url(openquote.gif) no-repeat left top !important;
	padding:5px 2px 10px 35px!important;
	padding /**/:0px; 	/* resetting padding in IE5+ */
	background /**/: url(); /* removing quote graphic in IE5+ */
}

PS. I must admit I have considered the option of removing the padding used for the closing quote and adding a couple of non-breaking spaces to last word of the quote to prevent overlap of the quote (E.G. 'em!' becomes 'em!  ') . Yes, it looks tighter, but doing it makes me feel unclean ;). Your call. (Gee,..I'd love a ':last-letter' element)