IE6 incorrectly (I think) positions background image

Any slight ideas?

Anyone?

I'll buy you a drink.

Hi Peacock,
Lucky for you i'm thirsty
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.

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

Cheers.

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.

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

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?

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

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!

Peacock (In a bad Monday mood, stupid LUFC)

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

<style>

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

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

</style>

Cheers for your help though.

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