SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy HTML in CSS Generated Content?

    Hi all,

    I'm doing a couple of things with links that can only be seen by browsers that support generated content, eg:

    Code:
    a[target=_blank]:after {
    	content: url(../layout/basic/a_target_blank.gif);
    	text-decoration: none;
    }
    I want to add a little sentence to the footer that will explain these little icons to our simpleton users. However, I only want this to show up in the aforementioned generated-content capable browsers, for example:

    Code:
    #footer:before {
    	content: "<p>Links marked <img src='../layout/basic/a_target_blank.gif' alt='' /> open in a new window.</p>"
    }
    However, upon testing this in Firefox, I find that its output as exactly that - the HTML is not interpreted but just printed on the screen. Does anybody know how I might do this?

    TIA,
    Olly Hodgson
    thinkdrastic.net

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gnarly
    Hi all,

    I'm doing a couple of things with links that can only be seen by browsers that support generated content, eg:

    Code:
    a[target=_blank]:after {
    	content: url(../layout/basic/a_target_blank.gif);
    	text-decoration: none;
    }
    I want to add a little sentence to the footer that will explain these little icons to our simpleton users. However, I only want this to show up in the aforementioned generated-content capable browsers, for example:

    Code:
    #footer:before {
    	content: "<p>Links marked <img src='../layout/basic/a_target_blank.gif' alt='' /> open in a new window.</p>"
    }
    However, upon testing this in Firefox, I find that its output as exactly that - the HTML is not interpreted but just printed on the screen. Does anybody know how I might do this?

    TIA,
    You have to concatenate the string together. You can't include HTML but you can simulate a paragraph by giving the generated content a display value of "block" and setting the appropriate margins.
    This works for me:
    HTML Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>Untitled</title>
    <style type="text/css" media="screen">
    <!--
    a[target=_blank]:after {
      content: url(http://www.sitepoint.com/forums/images/smilies/wink.gif);
      padding-left: 15px;
    }
    #footer:before {
      content: "Links marked by " url(http://www.sitepoint.com/forums/images/smilies/wink.gif) " open in a new window.";
      display: block;
      margin: 1em 0;
      background: #666;
      color: white;
    }
    -->
    </style>
    </head>
    <body>
      <div id="all">
        <div id="content">
          <a href="mypage.html" target="_blank">My link</a>
        </div>
        <div id="footer">
          <p>Footer Content.</p>
        </div>
      </div>
    </body>
    </html>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Nice work Vinnie

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    USA, Pa. Philly
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, someone else that lives in Philly, i was just reading through trying to learn as much as possible, when i noticed that you are from Philadelphia, i am in far ne, ok happy holidays, RJ

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RJweb
    wow, someone else that lives in Philly, i was just reading through trying to learn as much as possible, when i noticed that you are from Philadelphia, i am in far ne, ok happy holidays, RJ
    Off Topic:

    I'm near the Museums myself

  6. #6
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vinnie, you're a star. Thank-you very very much
    Olly Hodgson
    thinkdrastic.net


Bookmarks

Posting Permissions

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