Connecting Tech Pros Worldwide Help | Site Map

anchor bg image not displaying properly when URL wraps in IE6

 
LinkBack Thread Tools Search this Thread
  #1  
Old March 30th, 2007, 04:25 PM
rpaterso47@hotmail.com
Guest
 
Posts: n/a
Default anchor bg image not displaying properly when URL wraps in IE6

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


  #2  
Old March 30th, 2007, 05:05 PM
Els
Guest
 
Posts: n/a
Default Re: anchor bg image not displaying properly when URL wraps in IE6

rpaterso47@hotmail.com wrote:
Quote:
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.
Quote:
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/
  #3  
Old March 30th, 2007, 05:05 PM
Jim Moe
Guest
 
Posts: n/a
Default Re: anchor bg image not displaying properly when URL wraps in IE6

rpaterso47@hotmail.com wrote:
Quote:
>
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)
  #4  
Old March 30th, 2007, 06:05 PM
Jukka K. Korpela
Guest
 
Posts: n/a
Default Re: anchor bg image not displaying properly when URL wraps in IE6

Scripsit Els:
Quote:
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/

 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,662 network members.