Stylesheets - anchor bg image not displaying properly when URL wraps in IE6

Author

anchor bg image not displaying properly when URL wraps in IE6

rpaterso47@hotmail.com

2007-03-30, 7:17 pm

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

Els

2007-03-30, 7:17 pm

rpaterso47@hotmail.com wrote:

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

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.

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

Jim Moe

2007-03-30, 7:17 pm

rpaterso47@hotmail.com wrote:
>
> 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.

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

Jukka K. Korpela

2007-03-30, 7:17 pm

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.

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