[WSG] :after, IE, and link text wrapping

2005-11-23 Thread SunUp
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
**



Re: [WSG] :after, IE, and link text wrapping

2005-11-23 Thread Jon Tan

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 span 
before the closing /a 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
**



Re: [WSG] :after, IE, and link text wrapping

2005-11-23 Thread SunUp
Thanks Jon ...

It was suggested that I try span, 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 span
 before the closing /a 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

2005-11-23 Thread Paul Noone
Sunny, what Jon and I meant was to put the span at the end of the link like
this:

a class=externalThe linkspan class=extimage/span/a

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 span, 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 span before the closing /a 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

2005-11-23 Thread SunUp
 ... what Jon and I meant was to put the span at the end of the link like
 this:

 a class=externalThe linkspan class=extimage/span/a


*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

2005-11-23 Thread Paul Noone
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:

 a class=externalThe linkspan class=extimage/span/a


*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

2005-11-23 Thread Bert Doorn

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  */ }

a class=externalBlahspan /span/a

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

2005-11-23 Thread SunUp
  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  */ }

 a class=externalBlahspan /span/a

 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? shrug

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

2005-11-23 Thread Bob McAllister
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  */ }
a class=externalBlahspan /span/a

 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   a class=externalThe last spanword/span/a for longer links
that might split over lines; which collapses to
a class=externalspanBlah/span/a 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

2005-11-23 Thread SunUp
... place the last word of the link within the span.

 So   a class=externalThe last spanword/span/a 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 span back to get this ...

a class=externalLink herespan/span/a

... it disappears again. When I wrap it around the last word again, it appears.

Crazy stuff.

Thanks again, gentlemen.

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

2005-11-23 Thread Bert Doorn

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 span back to get this ...
a class=externalLink herespan/span/a
... it disappears again. When I wrap it around the last word again, it appears.


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
**