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.

When 'Inline' n <br> come together...

When 'Inline' n <br> come together:

Yes, I know that it's syntactically incorrect. I mean, that's why they call it 'inline'. We are not supposed to add <br> tag inside an inline element.
But consider this case. I have one span tag (which is basically inline) and the contents of span tag are dynamically generated. Suppose, for some cases, length of that dynamically generated content is more than length of one line. then that will overflow to next line. (which is actually equivalent to adding <br> in it). Right ?

This case, or you may call as exception, is handled differently in different browsers. Actually speaking, its handled similarly in Firefox, Chrome, Safari but not in Internet explorers. Lets see how -

So in these Non-IE browsers, what they do is they intelligently attach left side properties to upper line and right side properties to the last line. So if you add border to it then there will be in perfect [ and ] shape.

Check this -
But, internet explorer, on the other hand, treats them as two separate inline elements. Not only that, It applies css properties to both the elements. And that may cause problem in some cases. (like my last post)

In my opinion, making them two separate elements is unnecessary n actually wrong. I mean, I don't want to split my sentence in two parts then why are they using their 'Intelligence' to split it into two ?

&quot; Hello World &quot;

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.

Hello World...

I've been working on website designing for a while now. I wanna share some of my experiences... experiments.. some techniques that I come across while working. This blog is for that...

This blog's gonna be mostly technical (unlike my other blog) I like javascript.. css.. html.. I have some crazy (may be not so useful) Ideas that I wanna try... Overall I like to play with the web..

Regards,
Praj ~