Thu, 2009-11-26 11:23
Hi Guys,
I am sitting with a problem I have not found a solution to in IE6.
My hyperlinks in my right colum wraps across two lines and should have an arrow image at the end of that line. In FF and IE8, this works just fine but IE6 misplaces the arrow altogether.
Here's a snippet of my code if someone can see an obvious mistake here please
<a title="Media Center" href="#">This would be a very long string which wraps across two lines. The bullet should then appear on the second line at the bottom</a>
#LeftCol a { background-image:url(/images/bulletBlueArrow.gif); background-position:right 2px; background-repeat:no-repeat; color:#0046AD; font-size:0.7em; line-height:14px; padding-right:16px; text-decoration:none; }
Thanks,
James!
Fri, 2009-11-27 07:30
#1
Anyone have an idea?
Anyone have an idea? 
Sat, 2009-11-28 00:37
#2
One idea might be that you
One idea might be that you follow our posting guidelines and provide the information we need to answer you.
Tue, 2009-12-01 07:04
#3
Hi, My apologies...I have
Hi,
My apologies...I have been using forums for years and thought I had supplied enough information on the topic.
Anyway, here is an example I have done:
http://www.sixfoot.co.za/forum/solutions/ie6/bullet-image-align-to-back-of-anchor-tag.html
As you can see in FF, image appears at the back at the bottom of this tag but in IE6 (and IE7) the background image is off completely.
Thanks again,
James
Tue, 2009-12-01 08:16
#4
You provided enough info to
You provided enough info to diagnose, but we've found that ensuring the page is rendered in standards mode for IE's sake is critical. The only way that seems to work is to insist on seeing the complete source. When you've gained local credibility, it should be sufficient to tell us which mode you're triggering.
Move the bg image to the block container. IE6/7 have considerable trouble knowing how to deal with backgrounds on inline elements; especially dependent on whether the element has layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bullet-image-align-to-back-of-anchor-tag</title> <style type="text/css"> /*<![CDATA[*/ #LeftCol { background-image:url(images/bulletBlueArrow.gif); background-position:right bottom; background-repeat:no-repeat; padding-right: 16px; width:105px; } #LeftCol a { color:#0046AD; font-size:0.7em; line-height:14px; text-decoration:none; } /*]]>*/ </style> </head> <body> <div id="LeftCol"> <a title="Media Center" href="#">This would be a very long string which wraps across two lines. The bullet should then appear on the second line at the bottom</a> </div> </body> </html>
cheers,
gary
Tue, 2009-12-01 10:00
#5
Hey Gary! Thanks for coming
Hey Gary!
Thanks for coming back to me!
I've now added your solution here and I see that it works for this scenario:
http://www.sixfoot.co.za/forum/solutions/ie6/image-will-not-align-to-back-of-a-tag/solution-bullet-image-align-to-back-of-anchor-tag.html
Problem is, the arrow image needs to appear right after the last word in the < a > tag
So if the last line of that tag only has one word in it, the image needs to sit snug to the the right of the last word.
Any more suggestions would be appreciated!
Thanks for the posting tips too ,
James
Tue, 2009-12-01 11:13
#6
I've run into this problem,
I've run into this problem, and usually just told IE6/7 that the anchor was display: inline-block (which also doesn't have the image hugging the last bit of text, so same problem there). Since I considered IE an inferior browser that people usually choose to use, it was no biggie for me.
If it's absolutely critical for you, then you may have to manually put spans at the ends of your anchor words and throw the bg image on those instead:
<a href="#">Blah blah blah, learn more about <span>FOO</span></a>
where span has line-height equal to image height and some right padding... then background image.
Tue, 2009-12-01 23:06
#7
On further consideration,
On further consideration, along with your and Stomme's comments, I think the icon should not be in the background. It should be appended to the anchor text. I'd use a non-breaking space to tie the icon to the last word.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bullet-image-align-to-back-of-anchor-tag</title> <style type="text/css"> /*<![CDATA[*/ #LeftCol { width:105px; /* is this really wide enough? */ } #LeftCol a { color:#0046AD; text-decoration:none; } #LeftCol a img { border: none; vertical-align: middle; } /*]]>*/ </style> </head> <body> <div id="LeftCol"> <a title="Media Center" href="#">This would be a very long string which wraps across two lines. The bullet should then appear on the second line at the bottom <img src= "http://www.sixfoot.co.za/forum/solutions/ie6/image-will-not-align-to-back-of-a-tag/images/bulletBlueArrow.gif" alt="goto icon" /></a> </div> </body> </html>
cheers,
gary