By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,670 Members | 1,526 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,670 IT Pros & Developers. It's quick & easy.

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

P: n/a
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

Jan 2 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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@NO_SPAMcomcast.netwrote in message
news:9t******************************@comcast.com. ..
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

Jan 6 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.