anchor bg image not displaying properly when URL wraps in IE6

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

rpaterso47@hotmail.com - 30 Mar 2007 17:24 GMT

Hello,

I am trying to insert a background image into URLs that link to pages
outside our intranet and thus when clicked open a new window. The
image used is the common one seen on many sites, the little
overlapping windows. This code:

a.newWindow {
padding-right: 14px;
background: url(/bcasinfo/images/productionFiles/icons/newWindow.gif)
no-repeat right center;
}

works fine in FF-whatever regardless, and, most of the time in IE6.
However it does not work in IE6 when the sentence text that comprises
anchor wraps to a new line. What happens is the bg image stays on the
first line, usually overlapping the text, even as the padding-right is
visible on the line below.

The basic anchor rules have nothing unusual in their styling so I have
not included that code here.
Any help would be appreciated.
Thanks,
R.A. Paterson

Reply to this Message

Els - 30 Mar 2007 18:00 GMT

> I am trying to insert a background image into URLs that link to pages
> outside our intranet and thus when clicked open a new window.

> a.newWindow {
> padding-right: 14px;
[quoted text clipped - 5 lines]
> However it does not work in IE6 when the sentence text that comprises
> anchor wraps to a new line.

When divided over two lines, IE takes the top and right borders of the
first half, and the left and bottom borders of the second half, to
calculate the position of the background image. So, 'right center',
will position the background-image utter right of the paragraph (even
if the end of the second half of the link is mid sentence), and
vertically centered between the two lines.

To avoid this, you could either make sure a link is never wrapping to
a different line (by making them shorter and replacing spaces in the
link text with  ), or by adding an empty span or transparent
image to the end of the link, which you can then give the background
styles.

Signature

Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Reply to this Message

Jukka K. Korpela - 30 Mar 2007 18:56 GMT

Scripsit Els:

> To avoid this, you could either make sure a link is never wrapping to
> a different line (by making them shorter and replacing spaces in the
> link text with  ), or - -

The simple CSS way to prevent wrapping is white-space: nowrap. It is more
effective than  , since it prevents breaks after hyphens and some
special characters, too.

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Jim Moe - 30 Mar 2007 18:01 GMT

> I am trying to insert a background image into URLs that link to pages
> outside our intranet and thus when clicked open a new window. The
> image used is the common one seen on many sites, the little
> overlapping windows. This code:

Please post an URL to a test case demonstrating the problem. Code
fragments are generally not helpful, we cannot see the context of the
page, and your assumptions about what is relevant are not necessarily correct.

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / March 2007

anchor bg image not displaying properly when URL wraps in IE6