This picture is observed in IE 6-7, the arrow-picture is not transferred to another line along with the text.

alt text

Here is my code for reference

background: url("/Images/white_arrow_mainslider_link.gif") no-repeat scroll right top transparent; color: #FFFFFF; font: bold 14px/16px Arial; padding: 0 14px 0 0;

The link itself is placed in the h4 tag, which I position as absolute, so that it is always at the bottom of the general block.

    4 answers 4

    First of all, this is not a “mistake” (see http://www.satzansatz.de/cssd/wrappinglinkbg.html)

    Other options, except for the above, a little. Look at http://www.adipalaz.com/linksbg.html

    In short, then:

    1. white-space: nowrap;
    2. display: inline-block;
    3. Adding text enclosed in ^ span ^ to links and applying background to these elements ^ span ^ ...
    • Many thanks for the links, however, the proposed methods do not work in these browsers. - makregistr
    • Strange, it seems to be used to solve this issue. Actually, about the first and second options - of course, they simply prohibit the transfer of words to the next line. But the third option looked good. In addition, it seems like even more or less "automatically" ... - gote

    Well, firstly, the right top as it is obliged to the right-top, but if I'm not mistaken, the problem is the difference in display: block in one case and display: inline in the other.

    • there is no difference in css, the difference is only in browsers - makregistr

    If you have a task to add an arrow to the end of the text, add it programmatically using img. If the task is to add an arrow to the end of this text specifically, declare h4 as display: inline-block and position the arrow inside the block.

    • the arrow should adapt to the text, there are a lot of such blocks with different headers, besides you don’t know where to display: inline-block, but you don’t want to write a bunch of hacks for this task - makregistr

    Thanks to everyone who answered, but none of the proposed options came up, because when transferring the text to a link to another line, they all did not work (especially the method with white-space: nowrap, I think it is clear why). The problem was solved by the banal insertion of the img tag in the link, and everything works everywhere, I thought that it was possible to solve this problem somehow.

    • In principle, if there are a lot of documents and links, you can probably write a script (Javascript for the client, or, if the site is on the PCP / something similar in functionality, for the server) so that the same imzh is inserted into all the elements and where it is necessary ... - gote