John Huetz wrote:
> We're developing a site content management process which separates the
> 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.
Stuart Homfray wrote:
> 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!
If you are willing for IE to require DOM support, you might want to
consider a variant on Chris Heilmann's script[1] as mentioned by
Ingo[2]. The HTML would be as you wish:
<a class="new" href="blah">New link</a>
Then use Chris's script that traverses the <a> tags, looking for links
with class == "new". For each one, add a <span> tag as the last child
of the link, and use Stuart's CSS to style it. The selector would
change from "span.new" to ".new span" but that would be it.
That might help reduce the cruft that is actually in the code, at the
expense of a script for IE.
If you want to style Mozilla or Opera (and, MS willing, IE 7 as well)
without the script, use a modified version of Stuart's CSS that
defines content at the end of the link:
.new:after {
content: "";
background: url(http://www.johnhuetz.com/images/new.gif) no-repeat 5px 50%;
padding: 4px 14px; /* a total of 8px high, 28px wide */
line-height: 1px; /* the last 1px of the image height */
vertical-align: middle; /* vertically align it to the middle of
the adjoining text */
}
HTH,
Michael
[1] http://icant.co.uk/sandbox/inlinelinks/
[2] http://www.satzansatz.de/cssd/wrappinglinkbg.html
______________________________________________________________________
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/
