Automatically putting quotation marks around some text

[d000hg]

Say I have:

p.quote
{
...
}

In my stylesheet (there's a reason I can't use blockquote). I want to be able to use the :before and :after pseudo-elements to put some quotation marks and other stuff around but can't get it to work. I'm on IE6.

Incidentally why does everyone seem to use #something h1{} not h1.something{}?

ps this is my 1st post here!

[Antoniohawk]

Sorry, but I'm not sure how to solve your first problem. I'm pretty sure that that cannot be accomplished with css, at the moment that is. As for "#something h1{} not h1.something{}", I can explain that. They actually mean two totally different things.

Plain english: any <h1> element contained within any element with the id of "something" will have red text.

[color=green]#something h1 {
  color: #FF0000;
}

<div id="something">
  <h1>This text will be red.</h1>
</div>[/color]

Plain english: any <h1> element with a class of "something" will have red text.

[color=red]
h1.something {
  color: #FF0000;
}

<h1 class="something">This text will be red.</h1>
[/color]

[d000hg]

Thanks, that's very helpful. With respect to the quotes thing, the HTML 4.01 standard recommends that style sheets give this feature. You can certainly set what the quotation string will be for each level of quotes inside each other. There is a content: open-quote and close-quote option to put in XXX:before and XXX:after sections - they give an example of putting a sound before and after a header. I've actually seen a sample of code to do what I want but it doesn't appear to work in IE6 - it's CSS2 and maybe that's not yet fully supported like position:fixed?

[Vladdy]

You are correct, IE does not support :before and :after pseudo-classes. However, you can find javascript solutions that ammend this IE stupidity. I think jkd had one...

[brothercake]

If it's an inline quotation then you want the <q> element:

<p>
	Commenting on the new lifeform, Professor Spock said,  
	<q>Fascinating - totally non-corporeal, pure light, 
	pure energy</q>.
</p>

Language-specific quotation marks are automatically added either side (in compliant browsers) so you musn't add them yourself. This doesn't happen in IE, but you can get round that with a bit of scripting:

if(typeof document.all != "undefined && typeof window.opera == "undefined")
{
	var quotes = document.getElementsByTagName("q");
	var quotesLen = quotes.length;
	for(var i=0; i<quotesLen; i++)
	{
		var qText = quotes[i].innerText;
		quotes[i].innerHTML = "&amp;quot;" + qText + "&amp;quot;";
	}
}

[d000hg]

I actually want a blockquote but I'm adhering to HTML 4.01, which means you can't put text inside blockquote tags but must use a paragraph inside them. This then removes all the formatting I've put into the blockquote so I just decided to make my own quote-paragraph class, also letting me specify better the padding, margins etc.
That javascript could still be useful though; the :before/after things should work with any element such as my custom paragraph class in compliant browsers. Can I implement it server-side or can you not then tell what browser is being run?