Previous Message
Next Message

Variation on "off-site" links - need help

Sent by John Huetz on 12 September 2005 02:02


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:

http://www.kryogenix.org/days/external#au1124727283.5

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:

http://www.johnhuetz.com/imagetest.html

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?

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread:

Possibly related: