Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2004
    Location
    Durham, UK
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Automatically putting quotation marks around some text

    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!

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.
    Code:
    #something h1 {
      color: #FF0000;
    }
    
    <div id="something">
      <h1>This text will be red.</h1>
    </div>
    Plain english: any <h1> element with a class of "something" will have red text.
    Code:
    
    h1.something {
      color: #FF0000;
    }
    
    <h1 class="something">This text will be red.</h1>
    
    Last edited by Antoniohawk; 03-08-2004 at 10:32 PM.

  • #3
    New Coder
    Join Date
    Mar 2004
    Location
    Durham, UK
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If it's an inline quotation then you want the <q> element:
    Code:
    <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:
    Code:
    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; 03-09-2004 at 12:29 AM.
    "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
    New Coder
    Join Date
    Mar 2004
    Location
    Durham, UK
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •