<q> element not identified in IE 6.0

Question

I have used this in my HTML:

<q> Hai How r u </q>

Which shows the text in quotes, like "Hai How r u", for example.

This is working fine in FF but not in IE 6.0.

Please let me know why this happens, and any solutions you might know of.

I don't want to use the quote (") character in my HTML or a separate css file for this.

Answer 1

Why don't you just use the " characters? Unlike <b> and <i> which should be replaced by strong and emphasis respectively, as appropriate, the quote tag has a direct match in meaning to the quote character. There should be no need to use <q>.

Edit: Thanks for clarifying the question Yan. OP: Is there a specific reason you don't want to use the quotes? The stuff I said earlier still holds, but perhaps we can help with the problem preventing you from using quotes.

Edit 2: :|

Answer 2

A List Apart had a whole article devoted to the <q> tag:
Long Live The Q Tag

The summary is to add CSS to remove the quotes from Firefox and other browsers and then manually encode them in yourself. It's a bit of a pain, but at least it levels the playing field and you know that your content will look the same cross-browser.

If you really don't want to have to type the quotes in yourself, then take a look at these articles:

• http://simon.incutio.com/archive/2003/04/03/fixingQuotesWithJavascript
• http://diveintomark.org/archives/2002/05/04/the_q_tag
• http://diveintomark.org/archives/2002/08/14/the_q_tag_revisited
• http://www.clagnut.com/blog/157/

Answer 3

For what it is worth <q> is supported in Internet Explorer 8.

There are a lot of problems with <q> concerning multiple nested <q> elements (nested quotes) and "proper" quoting styles per language. This has hampered both the user-agent support as well as adoption rate.

All is not rosy in Firefox either, if go the CSS generated quotes route, when you an end-user cuts & pastes text with generated characters those characters don't make it to your clipboard. (see mozilla bug 12460)

Looking forward, there was an interesting thread in the W3C HTML working group on what HTML 5 should do with <q> in October of 2008.

Answer 4

I guess this isn't really answering the question, but I ignore the fact quotation marks don't render on IE6. I set up a stylesheet with this:

q:before { content: "\201c"; }
q:after { content: "\201d"; }

q q:before { content: "\2018"; }
q q:after { content: "\2019"; }

This renders curly quotes before and after the q element. Works in IE7 and the proper browsers. If you wanted straight quotes replace 201c and 201d with 0022.

What you can do to workaround the IE6 issue is either Javascript, or apply some different styles to the q tag, eg the following will display them italic and dark grey:

q { font-style: italic; color: #444444; }