John Huetz wrote:
We're developing a site content management process which separates the content from the presentation, what a novel idea. The designers want to be able to indicate within a list of links which link may be "new" by displaying a "NEW" graphic after the link text. What I'm trying figure out is how to make that happen within the style sheet only, such that the programmers only have to add a "class='new'" to the a tag inside the list item.


John, I've just had a play with this, and unfortunately, due circumstances beyond our control (ie IE!), the best that I could come up with was to add an empty <span class="new"> element:

HTML:
  <ul>
<li><a href="#">Class definition on a span<span class="new"></span></a></li> <li><a href="#">Class definition on a span that wraps inside the ul block<span class="new"></span></a></li>
  </ul>

CSS:
span.new {
background: url(http://www.johnhuetz.com/images/new.gif) no-repeat 100% 0.3em;
  padding-right: 28px;
  _display: inline-block; /* for IE6 */
}

I've tested in Firefox (1.0.6), Opera (8.02) and IE6 - haven't tested in Mac browsers.

I agree with you - if someone knows of a better technique that removes the need for unneccessary elements, I, too, am all ears!

cheers,

Stuart
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to