sudo append quotes

Today, I was trying to design some simple tabs (which, may be, I'll post later). So while searching for something, I found this concept in CSS called pseudo-elements, which made my previous solution for drawing quotes ridiculously long..

So basically, as the name suggests, pseudo elements are not exactly present in the markup, but we can still attach css properties to those elements.
for example, we can attach different properties to -

• First letter of the node
• First line of the block node
• Pseudo element before actual node
• Pseudo element after actual node

Making use of :before and :after pseudo-elements, I can write 2 short lines n boom... Its done...

/* CSS code for blockquote */
blockquote:before {content: url(start_quote_image_url)}
blockquote:after {content: url(end_quote_image_url)}

Please Note:

Html contents must be inline to work properly.
And of course, as usual, this doesn't work in IE6/7. The good news is – they are supporting it in IE8 beta.

" Hello World "

I really like those quotation mark images that now a days people are using.. you know, to define that this text is quotation.. As I was styling this blog I did some digging about how exactly people add those images.

I was pretty sure they use images inside <blockquote> but exactly how ?
do they add images manually or as a background image. It turns out authors prefer background images instead of adding image tags manually..

While searching things I came across this cool n simple way to add those quotes (check this) where there is one onload javascript which searches for <p> inside <blockquote> node n plugs quotation mark images on each side of it.

Its as simple as it sounds but I was not very useful for me. It was nothing like, you know, I was going to add quote for hundreds of time n thus need to run the script every time.. So I started playing around css. n after some time I came up with a solution that I want to share with you.

ACs are like computers - Both work fine until you open Windows!

Here, the good part is - quotes are floating.. they reposition themselves as inner text changes. Even shifts to next line if there's <br> in it.

/* CSS code for blockquote */
blockquote {
background: transparent url(start_quote_image_url) 1px 2px no-repeat;
padding: 5px 10px 0 35px;
margin: 5px 30px;
}
/* CSS code for p inside blockquote */
blockquote p {
background: transparent url(end_quote_image_url) 100% 0 no-repeat;
display: inline;
margin: 0;
padding: 3px 30px 0 0;
line-height: 22px;
}

So there you go.. You are now able to add quote images to <blockquote>

This css is not exactly perfect... It doesn't work in IE, if quote overflows to the second line. I'll explain that in my next post.

That's sad. But hey, It works in Firefox, Chrome and Safari.. :)

Update:

Please Note:

I've tweaked the CSS, so that it'll look differently (without quote images) in IE browsers. IE has some issues which I'll explain in my next post. So if you are using IE, may be its better if you shift to Firefox 3 asap.