linkpictures for all browsers

[Jan Steffen]

Hello everyone,

I want to make all links to external sites or special resources
(pdf, mailto-links, etc) easily recognizable for all users.
Currently I use markup like
<a href=".." class="extlink">External Link</a>
and a CSS like
..extlink/* */ {
background: transparent url(/link_out.gif) left center no-repeat;
padding: 0 0 0 12px;
}
to have a little picture in front of these special links.
I already hide this CSS from NC4 (with @import) and IE50 (with /*
*/), because they can't handle it.
Are there more problems to be expected?
(comments of non-working browsers welcome)
Do you know of a better CSS to reach more browsers?

I want to avoid a img-tag in every <a href="">...</a> of course. ;-)

Nearly forgotten. uri for testing:
http://www.germanbreastgroup.de/neu/hilfe.html
(lots of mailtos and external links there)

Thanks for all comments,
Jan

--
For every complex problem, there is a solution that is simple, neat,
and wrong. [H.L. Mencken, 1880-1956]

[Els]

Jan Steffen wrote:

Hello everyone,

I want to make all links to external sites or special resources
(pdf, mailto-links, etc) easily recognizable for all users.
Currently I use markup like
<a href=".." class="extlink">External Link</a>
and a CSS like
.extlink/* */ {
background: transparent url(/link_out.gif) left center no-repeat;
padding: 0 0 0 12px;
}
to have a little picture in front of these special links.
I already hide this CSS from NC4 (with @import) and IE50 (with /*
*/), because they can't handle it.
Are there more problems to be expected?

Yes, when a link is spread over two lines, the image will be on the
far left of the entire link, which is on the second line of course,
and because you set it vertically centered, only the bottom half
shows, as the top half is behind the text that's in the line above it.
This is on IE btw, Firefox has no problems.

BTW, you have another problem I think, unless you really want the
content to jump below the navigation on an only slightly smaller
window.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Jan Steffen]

Els schrieb:

Jan Steffen wrote:

I want to make all links to external sites or special resources
(pdf, mailto-links, etc) easily recognizable for all users.
Currently I use markup like
<a href=".." class="extlink">External Link</a>
and a CSS like
.extlink/* */ {
background: transparent url(/link_out.gif) left center no-repeat;
padding: 0 0 0 12px;
}
to have a little picture in front of these special links.
I already hide this CSS from NC4 (with @import) and IE50 (with /*
*/), because they can't handle it.
Are there more problems to be expected?
Yes, when a link is spread over two lines, the image will be on the
far left of the entire link, which is on the second line of course,
and because you set it vertically centered, only the bottom half
shows, as the top half is behind the text that's in the line above it.
This is on IE btw, Firefox has no problems.

Right, that's stupid. Doesn't get better in the background-image is
aligned diffenrently (top, right, absolut,...)
No idea why they behave differently, as usually gecko-browsers do it
right ;-)
Anyone has a idea how to avoid this?

BTW, you have another problem I think, unless you really want the
content to jump below the navigation on an only slightly smaller
window.

That's OK (only) on quite small windows. Shouldn't happen at 800x600
or above. I'll look into it a bit more. Thanks for pointing it out.

Jan
--
"Time flies like an arrow, fruit flies like a banana."
Groucho Marx

[Els]

Jan Steffen wrote:

Els schrieb:

Jan Steffen wrote:

I want to make all links to external sites or special resources
(pdf, mailto-links, etc) easily recognizable for all users.
Currently I use markup like
<a href=".." class="extlink">External Link</a>
and a CSS like
.extlink/* */ {
background: transparent url(/link_out.gif) left center no-repeat;
padding: 0 0 0 12px;
}
to have a little picture in front of these special links.
I already hide this CSS from NC4 (with @import) and IE50 (with /*
*/), because they can't handle it.
Are there more problems to be expected?

Yes, when a link is spread over two lines, the image will be on the
far left of the entire link, which is on the second line of course,
and because you set it vertically centered, only the bottom half
shows, as the top half is behind the text that's in the line above it.
This is on IE btw, Firefox has no problems.

Right, that's stupid. Doesn't get better in the background-image is
aligned diffenrently (top, right, absolut,...)
No idea why they behave differently, as usually gecko-browsers do it
right ;-)
Anyone has a idea how to avoid this?

Actually, yes.
I had to Google the groups for it, but I remembered having fixed this
problem before, although that about an image on the right side of the
link, but I guess it may work for the left side as well:
<http://groups-beta.google.com/group/comp.infosystems.www.authoring.stylesheets/msg/c945ef0dafd0c01c>

BTW, you have another problem I think, unless you really want the
content to jump below the navigation on an only slightly smaller
window.

That's OK (only) on quite small windows. Shouldn't happen at 800x600
or above. I'll look into it a bit more. Thanks for pointing it out.

Actually it does happen on 800x600 in my browser. At 821 to be
precise.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Thunder - Dirty Love

[Jan Steffen]

Els schrieb:

Jan Steffen wrote:

Els schrieb:

Yes, when a link is spread over two lines, the image will be on the
far left of the entire link, which is on the second line of course,
and because you set it vertically centered, only the bottom half
shows, as the top half is behind the text that's in the line above it.
This is on IE btw, Firefox has no problems.

Right, that's stupid. Doesn't get better in the background-image is
aligned diffenrently (top, right, absolut,...)
No idea why they behave differently, as usually gecko-browsers do it
right ;-)
Anyone has a idea how to avoid this?

Actually, yes.
I had to Google the groups for it, but I remembered having fixed this
problem before, although that about an image on the right side of the
link, but I guess it may work for the left side as well:
<http://groups-beta.google.com/group/comp.infosystems.www.authoring.stylesheets/msg/c945ef0dafd0c01c>

Thanks for the link. I played around with it a while, but didn't get
it to work better. Neither left or right.

BTW, you have another problem I think, unless you really want the
content to jump below the navigation on an only slightly smaller
window.

That's OK (only) on quite small windows. Shouldn't happen at 800x600
or above. I'll look into it a bit more. Thanks for pointing it out.

Actually it does happen on 800x600 in my browser. At 821 to be
precise.

Should be better now.

Thanks, Jan

--
Superstition brings bad luck.