" 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.