Background image in <a> element does not wrap in IE-6.

Hello everyone,

I have a slight problem that I can't seem to solve. I'm not sure if it's a
CSS problem, HTML problem or simply an IE-6 bug. I chose this forum as I
suspect the fix may be with CSS.

I have styled hyperlinks on a website to show a small "new window" icon when
I have a link that opens in a new window. This works as designed in FF. In
IE-6, however, when a hyperlink wraps to the next line, the icon does not
wrap along with it, it get stuck on the first line. You can see a screenshot
of the problem here (with red arrow pointing to the problem):

www.vikenk.com/screenshot.jpg

You can see the website here if you want to check the problem out for
yourself: www.sayatnova.com

Here's my hyperlink style (with commentary):

a:link { color: #0099ff }
a:visited { color: #ff8000 }
a:hover { color: #ff0000; text-decoration: none }
a:active { color: #ff0000 }
a.newwin {
background-image: url('../images/new_window_current.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 14px; (makes space for the icon image)
margin-right: 5px; (allows a little bit of space before the next word so
it doesn't look so crowded)
text-align: left;
}

I've tried to solve it by adding "white-space: nowrap" and other white-space
options to the style, but it hasn't worked. Again, it works fine in FF. I'm
not sure how to solve the problem.

Can anyone suggest any fixes? Thanks in advance!

--
Viken K.
http://www.vikenk.com

OK, I had a long-distance friend give me a tip and solved the problem. I
added the following to my style:

display: inline-block;

Problem solved - works in IE-6, IE-7, FF and Opera.

--
Viken K.
http://www.vikenk.com


"Viken Karaguesian" <vikenkNO_SPAM (AT) NO_SPAMcomcast (DOT) net> wrote

Hello everyone,

I have a slight problem that I can't seem to solve. I'm not sure if it's a
CSS problem, HTML problem or simply an IE-6 bug. I chose this forum as I
suspect the fix may be with CSS.

I have styled hyperlinks on a website to show a small "new window" icon
when I have a link that opens in a new window. This works as designed in
FF. In IE-6, however, when a hyperlink wraps to the next line, the icon
does not wrap along with it, it get stuck on the first line. You can see a
screenshot of the problem here (with red arrow pointing to the problem):

www.vikenk.com/screenshot.jpg

You can see the website here if you want to check the problem out for
yourself: www.sayatnova.com

Here's my hyperlink style (with commentary):

a:link { color: #0099ff }
a:visited { color: #ff8000 }
a:hover { color: #ff0000; text-decoration: none }
a:active { color: #ff0000 }
a.newwin {
background-image: url('../images/new_window_current.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 14px; (makes space for the icon image)
margin-right: 5px; (allows a little bit of space before the next word so
it doesn't look so crowded)
text-align: left;
}

I've tried to solve it by adding "white-space: nowrap" and other
white-space options to the style, but it hasn't worked. Again, it works
fine in FF. I'm not sure how to solve the problem.

Can anyone suggest any fixes? Thanks in advance!

--
Viken K.
http://www.vikenk.com