0

Вот такая картина наблюдается в ие 6-7, стрелка-картинка не переносится на другую строку вместе с текстом.

alt text

Вот мой код для ссылки

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;

Сама ссылка помещена в тег h4, который я позиционирую как absolute, чтоб он всегда был внизу общего блока

4 ответа 4

1

Прежде всего, это не "ошибка" (см. http://www.satzansatz.de/cssd/wrappinglinkbg.html)

Других вариантов, кроме предложенных выше, немного. Посмотрите в http://www.adipalaz.com/linksbg.html

Если вкратце то:

  1. white-space: nowrap;
  2. display: inline-block;
  3. Добавление текста, заключенного в ^span^, к ссылкам и применение фона к этим элементам ^span^...
1
  • Странно, вроде именно для решения данного вопроса и применялись. Собственно, про первый и второй варианты - понятно, они просто запрещают перенос слов на следующую строку. А вот третий вариант выглядел неплохо. К тому же, вроде как даже более-менее "автоматически"...
    – gote
    21 апр 2011 в 21:19
0

Ну во-первых right top как бы обязвает справа-сверху, но если не ошибаюсь, проблема разницы в display: block в одном случае и display: inline в другом.

1
  • разницы в цсс нет, разница только в браузерах
    – makregistr
    21 апр 2011 в 11:43
0

Если у вас задача - добавить стрелочку к концу текста, добавляйте ее программно с помощью img. Если же задача - добавить стрелочку к концу конкретно этого текста, объявите h4 как display:inline-block и позиционируйте стрелочку уже внутри блока.

1
  • стрелочка должна подстраиваться под текст, таких блоков с разными заголовками очень много, к тому же о свойстве display:inline-block забыли сами знаете где, а писать кучу хаков ради такой задачи не хочется
    – makregistr
    21 апр 2011 в 11:39
0

Спасибо всем ответившим, но к ни один вариант из предложенных не подошел, поскольку при переносе текста ссылке на другую строку все они не работали (особенно метод с white-space: nowrap, думаю понятно почему). Проблема решилась банальной вставкой тега img в ссылку, и все везде работает, думал, что можно решить эту задачу как-то изяшней.

1
  • В принципе, если много документов и ссылок, наверное можно написать скрипт (ЖаваСкрипт для клиента, или, если сайт на ПХП/чем-то аналогичном по функционалу, для сервера) чтобы тот самый имж вставлялся во все элементы а куда надо...
    – gote
    21 апр 2011 в 21:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.