Web Analytics Made Easy -
StatCounter Automatically putting quotation marks around some text - CodingForum


No announcement yet.

Automatically putting quotation marks around some text

  • Filter
  • Time
  • Show
Clear All
new posts

  • Automatically putting quotation marks around some text

    Say I have:


    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!

  • #2
    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>
    Plain english: any <h1> element with a class of "something" will have red text.
    h1.something {
      color: #FF0000;
    <h1 class="something">This text will be red.</h1>
    Last edited by Antoniohawk; Mar 8, 2004, 04:32 PM.


    • #3
      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?


      • #4
        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...
        Vladdy | KL
        "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


        • #5
          If it's an inline quotation then you want the <q> element:
          	Commenting on the new lifeform, Professor Spock said,  
          	<q>Fascinating - totally non-corporeal, pure light, 
          	pure energy</q>.
          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;";
          Last edited by brothercake; Mar 8, 2004, 06:29 PM.
          "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


          • #6
            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?