Q tag and Internet Explorer

September 21st, 2010 by Alex Leave a reply »

You’ve probably ignored the Q tag before. Why? That is the question we all have one answer for… Because of Internet Explorer. Yes, yes, it doesn’t render it how it should (no quotes on sides).
But it can product a nice result when you need to quote the sentence or quote the person’s speech.

This is how it looks in your browser:
Confucius says: Everything has its beauty but not everyone sees it.

Nothing special, so, let’s add a style for all browsers:

q:before, q:after { content: "" }

Now, all the Q’uotes display the same in all browsers (IE and normal browsers). So, to add quotes, we’ll add them ourselves and stylize the quote as we wish. I’m reminding that there are special html entities for curled quotes: accronym to Left Double Quote – “ and Right Double Quote – ”

Confucius says: &ldquo;<q>Everything has its beauty but not everyone sees it.</q>&rdquo;

Next, let’s italize the quote:

q { font-style: italic }

Confucius says: “Everything has its beauty but not everyone sees it.

Good? Good.


1 comment

  1. Great tips ! really i am enjoying reading your blog ! it’s a lot of information i wouldnt know !