Re: [WSG] :after, IE, and link text wrapping
G'day Ok ok, I know I said I'd given up, but I tried this, and it finally worked. Still ... it's weird that it didn't show up before. And in fact, when I move the back to get this ... Probably because you have an empty inline element (nothing inside the span). Browser says: there's nothing there so I'll display nothing :-) Maybe if you put a space in it (hoping MSIE doesn't decide it's unneeded whitespace)? Or give it display:inline-block, with a width. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] :after, IE, and link text wrapping
>... place the last word of the link within the span. > > So The last word for longer links Ok ok, I know I said I'd given up, but I tried this, and it finally worked. Still ... it's weird that it didn't show up before. And in fact, when I move the back to get this ... http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] :after, IE, and link text wrapping
Paul Noone wrote:
> Set a width or padding on your exit class that is sufficient to display the
> image.
On 11/24/05, Bert Doorn <[EMAIL PROTECTED]> wrote:
> In fact, the span doesn't need a class at all if you do this:
> a.external span { /* whatever styles needed */ }
>Blah
>
> FWIW, I don't like the idea of adding extra, non semantic markup
> for presentational purposes.
One way to avoid dealing with whether or not an empty span displays
its background (and perhaps to salve the conscience over non-semantic
markup) is to place the last word of the link within the span.
So The last word for longer links
that might split over lines; which collapses to
Blah when there is only a single word.
Bob
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] :after, IE, and link text wrapping
> > Set a width or padding on your exit class that is sufficient to display the
> > image.
>
Yes, did that. I still can't see the wretched thing.
> And get the class name in the html matching the css. In fact,
> the span doesn't need a class at all if you do this:
>
> a.external span { /* whatever styles needed */ }
>
> Blah
>
> FWIW, I don't like the idea of adding extra, non semantic markup
> for presentational purposes.
>
Thanks for that too Bert. That's just about what I ended up with, and
it just won't show itself. Agreed, the extra markup is undesirable,
but I was getting annoyed that it wasn't working and was willing to
try anything just to get the thing to show, and THEN decided whether I
wanted to live with it like that.
However, I give up on it. Weird though, I can see it working in IE
here: http://webdesign.maratz.com/lab/visited_links_styling/. I
seriously don't know why it's not working for me .. maybe something
else in the styles is preventing it?
Thanks to you all for your input.
I'm 10 pages down, and about 100 to go, on a major redesign from
table-based to .. well, not table-based. I'm sure I have other things
I should be paying more attention to.
sunny.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] :after, IE, and link text wrapping
G'day
Paul Noone wrote:
Set a width or padding on your exit class that is sufficient to display the
image.
And get the class name in the html matching the css. In fact,
the span doesn't need a class at all if you do this:
a.external span { /* whatever styles needed */ }
Blah
FWIW, I don't like the idea of adding extra, non semantic markup
for presentational purposes.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] :after, IE, and link text wrapping
Set a width or padding on your exit class that is sufficient to display the
image.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of SunUp
Sent: Thursday, 24 November 2005 1:59 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] :after, IE, and link text wrapping
> ... what Jon and I meant was to put the span at the end of the link
> like
> this:
>
> The link
*nod*
I did try that.
And then the CSS would be:
span.exit {
background: url(media/external.gif) no-repeat; }
yea?
It doesn't show at all :(
Clearly I need a sign on my back that says "I'm too thick to do this stuff".
Thanks guys,
sunny.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] :after, IE, and link text wrapping
> ... what Jon and I meant was to put the span at the end of the link like
> this:
>
> The link
*nod*
I did try that.
And then the CSS would be:
span.exit {
background: url(media/external.gif) no-repeat;
}
yea?
It doesn't show at all :(
Clearly I need a sign on my back that says "I'm too thick to do this stuff".
Thanks guys,
sunny.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] :after, IE, and link text wrapping
Sunny, what Jon and I meant was to put the span at the end of the link like this: The link This will force the image to appear at the nend of the link. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of SunUp Sent: Thursday, 24 November 2005 12:53 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] :after, IE, and link text wrapping Thanks Jon ... It was suggested that I try , which I did, but IE still displays the image at the end of the line, where the long link text wraps, instead of at the of whole link. I think I'll just hide it afterall, and IE users can (in the inimitable words of "Dad" in "The Castle") suffer in their jocks. thanks, sunny On 11/24/05, Jon Tan <[EMAIL PROTECTED]> wrote: > SunUp <[EMAIL PROTECTED]> wrote: > > >Is there a way to make it display the image at the END of the LINK, > >instead of at the end of the LINE? > >I've messed around w/ placement and padding etc. No joy. > > Hi Sunny > > Turning them off for IE has always been my answer. If you realy want > the bg img in there to indicate an external link one workaround is to > add a before the closing and apply a bg to that but it's a little verbose. > > btw... [off topic] for all of you who may go to the Melbourne bbq > *blah* on behalf of anyone suffering under winter in the northern > hemisphere; when people start talking about frisbees I get jealous. > > Jon Tan > www.gr0w.com > [EMAIL PROTECTED] > > > > ** > The discussion list for http://webstandardsgroup.org/ > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ** > > ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] :after, IE, and link text wrapping
Thanks Jon ... It was suggested that I try , which I did, but IE still displays the image at the end of the line, where the long link text wraps, instead of at the of whole link. I think I'll just hide it afterall, and IE users can (in the inimitable words of "Dad" in "The Castle") suffer in their jocks. thanks, sunny On 11/24/05, Jon Tan <[EMAIL PROTECTED]> wrote: > SunUp <[EMAIL PROTECTED]> wrote: > > >Is there a way to make it display the image at the END of the LINK, > >instead of at the end of the LINE? > >I've messed around w/ placement and padding etc. No joy. > > Hi Sunny > > Turning them off for IE has always been my answer. If you realy want the bg > img in there to indicate an external link one workaround is to add a > before the closing and apply a bg to that but it's a little verbose. > > btw... [off topic] for all of you who may go to the Melbourne bbq *blah* on > behalf of anyone suffering under winter in the northern hemisphere; when > people start talking about frisbees I get jealous. > > Jon Tan > www.gr0w.com > [EMAIL PROTECTED] > > > > ** > The discussion list for http://webstandardsgroup.org/ > > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ** > > ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] :after, IE, and link text wrapping
SunUp <[EMAIL PROTECTED]> wrote: Is there a way to make it display the image at the END of the LINK, instead of at the end of the LINE? I've messed around w/ placement and padding etc. No joy. Hi Sunny Turning them off for IE has always been my answer. If you realy want the bg img in there to indicate an external link one workaround is to add a before the closing and apply a bg to that but it's a little verbose. btw... [off topic] for all of you who may go to the Melbourne bbq *blah* on behalf of anyone suffering under winter in the northern hemisphere; when people start talking about frisbees I get jealous. Jon Tan www.gr0w.com [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
[WSG] :after, IE, and link text wrapping
Hi folks,
I'm displaying a small image to indicate an external link using this:
a.external:after {
content: url(media/external.gif);
padding-left: 2px;
}
Obviously IE doesn't show this, so I've used this in a separate style
sheet for IE:
a.external {
background: url(media/external.gif) no-repeat 100% 50%;
padding-right: 15px;
}
The first method produces this, even if the link text wraps:
Some link text here [pic]
or
Some link text
here [pic]
Sweet.
But in IE, when the link text wraps, I get this:
Some link text [pic]
here
IE is misplacing the image in links that wrap, but places them
perfectly correctly if the link is contained in one line.
I'm considering just turning off the pretty [pic] for IE users and
leaving it at that.
Is there a way to make it display the image at the END of the LINK,
instead of at the end of the LINE?
I've messed around w/ placement and padding etc. No joy.
ta,
sunny.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
