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.
I'm trying to adapt a technique put forth by "Arleen" on this page:
The CCS3 techniques won't work for us, since the audience for the
site all use MS IE 6 (this is an intranet site accessed by engineered
desktops). While we always strive for highly compliant markup, we
must always remain cognizant of our IE-centric environment.
I'm running into the problem that the last poster wrote about, "If
the link wraps two lines or more, the image is not positioned
correctly." As I worked on this more, it's apparent that this
technique fails in IE, not in the Mozilla variants.
I put together a test page:
The first unordered list is the Arleen technique, which if you view
this page in MS IE 6, you can see the failure on the second link.
The second unordered list moves the "new" class to the <li>, which
poses a vertical positioning problem on the wrapped link.
The last unordered list is my last-ditch attempt, which has the site
programmers insert an empty <img> tag with a class definition if the
link is decalred "new". This doesn't work at all in Firefox, but is
close enough in IE.
I'd greatly appreciate comments or similar experiences ... is there a
better way to do this?
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/