Re: [css-d] Variation on "off-site" links - need help
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 element:
>
> HTML:
>
> Class definition on a span class="new">
> Class definition on a span that wraps inside the ul
> block
>
>
> 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:
New link
Then use Chris's script that traverses the tags, looking for links
with class == "new". For each one, add a 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/
Re: [css-d] Variation on "off-site" links - need help
Alun Rowe wrote: Otherwise indent the link by 10px and add a 10px background image no-repeat align left. Yes, makes sense, actually - stick the image on the LEFT... Probably 'reads' better on the web page too: when you do a quick scan down the list, you see the new items straight away. Don't know whether that'll suit John, but *I* like it!! :) 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/
Re: [css-d] Variation on "off-site" links - need help
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 element:
HTML:
Class definition on a spanclass="new">
Class definition on a span that wraps inside the ul
block
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/
Re: [css-d] Variation on "off-site" links - need help
John Huetz wrote: ... 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 , 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 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? You might use a technique discussed here http://www.satzansatz.de/cssd/wrappinglinkbg.html Ingo -- http://www.satzansatz.de/css.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/
[css-d] Variation on "off-site" links - need help
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 , 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 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 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/
