IE7: background-img on multipleline text

Question

On a anchor-tag with a url to a external site we have a little icon that indicates that this is a link to a external site. Now this Icon is included via a additional span-element around the link-text and displayed via CSS background-image with position 100% 50% to always be at the end of the text and a padding-right for the text-gap between link and the following text

now this works fine in every browser — as long as the link-text is not longer than 1 line … if it is on multiple lines, the whole thing works still fine everywhere, except IE7 (IE6 is not supported by the project)… IE7 displays the Icon at the end of the first line and a few pixels to the bottom, instead of at the end of the link-/span-text on the second or third line…

Sometimes a picture says more than 1000 words: http://img859.imageshack.us/i/spdexternalerror.jpg/

HTML-Code: <a href="#"><span class="external">Link-Text to multiple lines</span></a>

CSS to the span-element: {background: url(/#/icon-new-window.png) no-repeat center right; padding-right: 14px;}

Can you write down html and css code associated with these urls? — eugeneK, Apr 12 '11 at 06:24
try to "change right" center to "right bottom" and "padding-right" change to "margin-right" these are two things i would start with when i deal with different IE's. Then i would give exact size for your span and change display:block — eugeneK, Apr 12 '11 at 06:39

score 1 · Answer 1 · edited Apr 12 '11 at 09:13

1

adding zoom:1 CSS property resolves this problem at most situations

edited Apr 12 '11 at 09:13

andyb

43,435
12
121
150

answered Apr 12 '11 at 06:52

albuvee

2,744
6
28
38

@eugeneK It applies to ie7 as well. See also http://stackoverflow.com/questions/6287023/what-bug-does-zoom1-fix-in-css – Chris B Sep 03 '13 at 17:44

score 1 · Answer 2 · edited May 23 '17 at 12:13

Multi-line background is a problem for IE7. The correct way to do what you want, without adding extra markup, is to use CSS :after however :after is not supported natively in IE6 or 7 (support was added in IE8). If you don't mind using JavaScript to add :after support to IE7 then you could use the ie7-js library (also see this question :after and :before css pseudo elements hack for IE 7)

Using that library, the following is working for me in IE7.

<!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>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        p {
            width:100px;
            border:1px dashed blue;
        }

        a.external:after {
          content:url(http://www.knowledgewand.com/images/icon_new_window.gif);
        }
    </style>
    <!--[if lt IE 9]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
    <![endif]-->
</head>
<body>
    <p>
        <a href="#" class="external">Link-Text to multiple lines</a>
    </p>
</body>
</html>

IE7: background-img on multipleline text

2 Answers2