10 replies [Last post]
Peacock
Offline
newbie
Leeds, UK
Last seen: 15 years 43 weeks ago
Leeds, UK
Joined: 2003-09-23
Posts: 10
Points: 0

Right.

I'm attempting to place a small arrow at the END of each link on a site I'm working on. basically, the code being written out is of this format.

Quote:

<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Very long link which wraps onto a second line</a><br />

And the style used to format it, is of this format :

Quote:

background-image:url(../images/arrow_blue.gif);
background-repeat:no-repeat;
background-position: 100% 4px;
padding-right: 10px;
text-decoration:none;

I've attached two examples of what happens in both IE6 and Opera/Mozilla, and as you can see it looks great if the link does not wrap, but if it does wrap then the background image does not get displayed at the end of the link.

Any tips on wether it's IE that's implementing it incorrectly, or Mozilla/Opera, and any ideas on how to achieve this in a different way much appreciated!

Peacock
Offline
newbie
Leeds, UK
Last seen: 15 years 43 weeks ago
Leeds, UK
Joined: 2003-09-23
Posts: 10
Points: 0

IE6 incorrectly (I think) positions background image

Any slight ideas?

Anyone?

I'll buy you a drink.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 18 hours 42 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

IE6 incorrectly (I think) positions background image

Hi Peacock,
Lucky for you i'm thirsty Laughing out loud
I'm not really sure which way you want it to display.

Here's a couple of suggestions:
If you can't control the length of the text you could try text-overflow:clip or ellipsis. (works only in ie6 >)
You could put the image in the link without using it as a background.

Hope that worthy of a drink, it's all I can come up with at the moment.

Peacock
Offline
newbie
Leeds, UK
Last seen: 15 years 43 weeks ago
Leeds, UK
Joined: 2003-09-23
Posts: 10
Points: 0

IE6 incorrectly (I think) positions background image

Didn't work I'm afraid...

Well, next time I'm in Brisbane I'll track you down and buy you a pint anyway!

Was trying to avoid having to use JavaScript to change the arrow colour on rollover, but looks like I might have to now... Sad

Cheers.

samcollett
Offline
newbie
Last seen: 15 years 42 weeks ago
Joined: 2003-09-26
Posts: 5
Points: 0

IE6 incorrectly (I think) positions background image

Maybe the following will help:

background-image:url(../images/arrow_blue.gif);
background-repeat:no-repeat;
background-position: right;
padding-right: 10px;
text-decoration:none;
white-space : nowrap;

Change padding-right to the width of the image (arrow_blue.gif). However, white-space is not supported by IE 5 and earlier.

samcollett
Offline
newbie
Last seen: 15 years 42 weeks ago
Joined: 2003-09-26
Posts: 5
Points: 0

IE6 incorrectly (I think) positions background image

The following may work as well: background-position: top right;

Peacock
Offline
newbie
Leeds, UK
Last seen: 15 years 43 weeks ago
Leeds, UK
Joined: 2003-09-23
Posts: 10
Points: 0

IE6 incorrectly (I think) positions background image

Cheers Sam,

I'm afraid all that did was to force the text onto one line, and expand the containing DIV.

Is this an IE bug, or are Mozilla and Opera the culprits here do you reckon?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 18 hours 42 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

IE6 incorrectly (I think) positions background image

Hi Peacock,
Usually Netscape and Opera are closer to the standard then ie.
One thing you can do to bring ie closer to the standard is ensure it renders in strict mode. This requires a correct doctype and can be tested quickly by typing in the address bar: javascript:alert(document.compatMode); if the alert box shows BackCompat you will be running in quirks mode so check out you doctype.
If the alert box shows CSS1Compat then you browser is displaying in standards or strict mode.

There are some good articles on doctypes in the Useful CSS Links page

Hope that helps

Peacock
Offline
newbie
Leeds, UK
Last seen: 15 years 43 weeks ago
Leeds, UK
Joined: 2003-09-23
Posts: 10
Points: 0

IE6 incorrectly (I think) positions background image

Cheers Tony,

I try (where possible) to implement strict doctypes, but in the case of this site I'm on XHTML 1.0 transitional.

I already tried changing the doctype to strict, transitional, none at all, HTML 4 etc... must just be one of them things.

I think I'll have to just ask the client to be less verbose! Smile

Peacock (In a bad Monday mood, stupid LUFC)

Peacock
Offline
newbie
Leeds, UK
Last seen: 15 years 43 weeks ago
Leeds, UK
Joined: 2003-09-23
Posts: 10
Points: 0

IE6 incorrectly (I think) positions background image

Well, just to let you guys know, I've at least found a method which degrades nicely in IE, and still works in Mozilla and Opera.

I have used the a:after property.

A quick example...

Quote:

<style>

a {
padding-right : 2px;
font-size : 20px;
}

a:after { content : url(img.gif); }


</style>

Cheers for your help though.

samcollett
Offline
newbie
Last seen: 15 years 42 weeks ago
Joined: 2003-09-26
Posts: 5
Points: 0

IE6 incorrectly (I think) positions background image

How about

background-image:url(../images/arrow_blue.gif); 
background-repeat:no-repeat; 
background-position: top right; 
padding-right: 12px; /* width of image + padding */
text-decoration:none;

i.e Remove the following from the style white-space : nowrap;

The CSS Attributes site at MSDN may be useful: CSS Attributes