11 Replies Latest reply on Dec 18, 2010 11:35 AM by pziecina

    CSS Before & After?

    Nancy OShea Adobe Community Professional & MVP

      I'm trying to put curly quotes around testimonials using CSS before and after.  It's not working in FF or IE.

      In FF I get code, in IE nothing.   What am I missing? 

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      
      /**WIDGET**/
      .testimonial {font-style:oblique;}
      .testimonial:before {content: "&#8220;"}
      .testimonial:after {content: "&#8221;"}
      </style>
      </head>
      
      <body>
      <p class="testimonial">XYZ Company has great products!<br />
      <span>&mdash; <strong>FHM Magazine</strong><em>, Australia</em></span></p>
      </body>
      </html>
      
      

       

       

       

      Nancy O.
      Alt-Web Design & Publishing
      Web | Graphics | Print | Media  Specialists
      http://alt-web.com/
      http://twitter.com/altweb

        • 1. Re: CSS Before & After?
          BCDoherty Level 3

          Nabcy,

          Try this:

           

          .testimonial:before {content: "\201C";}

          .testimonial:after {content: " \201D";}

          Seems that one has to use the escaped unicode instead.
          Hope this helps.
          Barry

          1 person found this helpful
          • 2. Re: CSS Before & After?
            Ben M Adobe Community Professional

            Nancy, from what I've been able to tell so far the quotes are treating the code as a string as opposed to HTML.  I can't explain IE not showing anything, but IE 9 should show the string.  I'll try looking into this a bit more.

            • 3. Re: CSS Before & After?
              Ben M Adobe Community Professional

              BC you are right.  Need to use the unicode to process this.  Tested in Safari and Firefox with no issues.  Not sure how IE < 9 will treat it.

              • 4. Re: CSS Before & After?
                BCDoherty Level 3

                This really shouldn't work at all sine one is trying to insert html into css. One of the driving forces behind css is to separate the two.

                Barry

                • 5. Re: CSS Before & After?
                  David_Powers Adobe Community Professional (Moderator)

                  BCDoherty wrote:

                   

                  .testimonial:before {content: "\201C";}

                  .testimonial:after {content: " \201D";}

                  Seems that one has to use the escaped unicode instead.

                  Correct. See the CSS2.1 spec for other values: http://www.w3.org/TR/CSS21/generate.html#quotes-specify.

                  1 person found this helpful
                  • 6. Re: CSS Before & After?
                    pziecina Adobe Community Professional

                    Hi Nancy

                     

                    You could look at the example I have used on this page - http://www.pziecina.com/design/turorial_demos/css_demo.php, under 'content property' 2nd from last on the page.

                     

                    IE6/7  do not support the generated content property, and Safari only offers partial support, see - http://reference.sitepoint.com/css/content.

                     

                    Paula

                    • 7. Re: CSS Before & After?
                      Nancy OShea Adobe Community Professional & MVP

                      Thanks everyone for your replies. 

                       

                      CSS2 Before and After content with open-quote and close-quote works in (Win) FF 3.6, IE8, and Opera 11.

                      It doesn't work in IE6/7 (expected) or Chrome/Safari (surprising).    Go figure!

                       

                       

                      Nancy O.

                      • 8. Re: CSS Before & After?
                        pziecina Adobe Community Professional

                        Hi Nancy

                        It doesn't work in IE6/7 (expected) or Chrome/Safari (surprising).    Go figure!

                        This has been a constant/repeated discussion on the Safari dev blog, and just shows that when browser manufacturers concentrate on new items, (html5/css3 etc) other things either get missed or forgotten, after all the use of 'open-quote' and 'closed-quote' is css2.1.

                         

                        One possible cross browser solution is to use an image for the quotes, as this will work as generated content in webkit browsers -

                        content: "file path to the image";

                         

                        Personally I would prefer to allow the webkit, (and IE6/7) browsers to simply not show anything for accessibility reasons.

                         

                        Paula

                        • 9. Re: CSS Before & After?
                          David_Powers Adobe Community Professional (Moderator)

                          Nancy O. wrote:

                           

                          CSS2 Before and After content with open-quote and close-quote works in (Win) FF 3.6, IE8, and Opera 11.

                          It doesn't work in IE6/7 (expected) or Chrome/Safari (surprising).    Go figure!

                          CSS2.1 Working Draft 07 December 2010 - Features at risk:

                           

                          "The 'quotes' property and the  'open-quote', 'close-quote', 'no-open-quote' and 'no-close-quote'  keywords may be dropped."

                           

                          http://www.w3.org/TR/CSS21/

                          • 10. Re: CSS Before & After?
                            Nancy OShea Adobe Community Professional & MVP

                            Personally I would prefer to allow the webkit, (and IE6/7) browsers to simply not show anything for accessibility reasons.

                             

                            Me too.  I'm not using graphics for this. 

                             

                             

                            Nancy O.

                            • 11. Re: CSS Before & After?
                              pziecina Adobe Community Professional

                              Hi Nancy and David

                               

                              Thank you David, after reading the css specs, (for the xxxx time, and missed it previously) I now have this working cross browser -

                               

                              example of the code -

                               

                              <!DOCTYPE html>
                              <html xmlns="http://www.w3.org/1999/xhtml">
                              <head>
                              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                              <title>Untitled Document</title>
                              <style type="text/css">
                              /* Specify pairs of quotes for two levels in two languages */
                              q:lang(en) { quotes: '"' '"'; }

                               

                              /* Insert quotes before and after Q element content */
                              q:before { content: open-quote; }
                              q:after  { content: close-quote; }

                               

                              </style>
                              </head>

                               

                              <body>
                              <P><Q>Quote me!</Q></P>

                               

                              </body>
                              </html>

                               

                              One must specify the quotes to be used in Safari, works in other browsers as well, (well almost, not IE6/7)

                               

                              Hope this helps Nancy.

                               

                              Paula

                               

                              Edit: For some unknown reason it is giving single curly quotes in IE8/9.

                               

                              Message was edited by: pziecina