VPF::Подчеркивание ссылок бордером при overflow:hidden

Elflight

Дата 18.10.2010, 15:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 2.4.2007

Репутация: нет
Всего: нет

Товарищи, помогите пожалуйста решить проблему.. Есть набор пронумерованных ссылок, для которых подчеркивание делается с помощью точечного нижнего бордера:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" lang="ru"><head>
<meta http-equiv="X-UA-Compatible" content="IE=IE8">
<style>
.inside_section .pref {float:left;}
.inside_section .link_ {overflow:hidden;}
.link_ a {border-bottom:1px dotted; text-decoration:none;}
</style>
</head>

<body>
    <table><tbody><tr>
    <td style="padding-left: 10px; margin-right: 10px;" valign="top" width="203px">
    <div class="inside_section"><div class="pref">1.1.1.</div><div class="link_"><a href="#" >Домашние животные. Общие темы</a></div></div>
    <div class="inside_section"><div class="pref">1.1.2.</div><div class="link_"><a href="#" >Сайты о кошках</a></div></div>
    <div class="inside_section"><div class="pref">1.1.3.</div><div class="link_"><a href="#" >Сайты о собаках</a></div></div>
    <div class="inside_section"><div class="pref">1.1.4.</div><div class="link_"><a href="#" >Сайты о птицах</a></div></div>
    <div class="inside_section"><div class="pref">1.1.5.</div><div class="link_"><a href="#" >Сайты о лошадях</a></div></div>
    <div class="inside_section"><div class="pref">1.1.6.</div><div class="link_"><a href="#" >Сайты о декоративных зверьках</a></div></div>
    </td></tr></tbody></table>
</body>
</html>

Проблема в том, что в Хроме, Опере и Сафари подчеркивание отрабатывается нормально, т.е. подчеркнут весь текст. А в FF и IE подчеркивается только первая строка многострочных ссылок. Если убрать overflow:hidden у блока, оборачивающего ссылку, то подчеркивание исправляется, но рушится обтекание :(
Заранее спасибо за совет..

FightInGlory

Дата 18.10.2010, 15:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 1

Код


.inside_section .pref {float:left;}
.inside_section .link_ {float:left; width:167px;}
.link_ a {border-bottom:1px dotted; text-decoration:none; }

Ширину указать и все.

ksnk

Дата 18.10.2010, 15:49 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Подчеркивать многострочный текст с помощью свойства border... хмм... Интересно почему это вообще работает? smile

Хотя если сделать полный бордер, то для IE будет видно в чем проблема. просто не вмещается рамка в отведенный ей свыше размер строки. Нужно его слегка увеличить.

Код


.link_ a {border-bottom:1px dotted; text-decoration:none;line-height:1.3em;}

так, например... Хотя значение 1.3 можно поподбирать.

Это сообщение отредактировал(а) ksnk - 18.10.2010, 15:51

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

SelenIT

Дата 18.10.2010, 15:59 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(ksnk @ 18.10.2010, 15:49

)

Интересно почему это вообще работает?

По п. 9.2.4 спецификации?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Elflight

Дата 18.10.2010, 16:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 2.4.2007

Репутация: нет
Всего: нет

FightInGlory, спасибо огромное! Так просто, но совсем в другой стороне от моих поисков smile

ksnk, спасибо и вам за точный диагноз smile

Однако решение, предложенное выше, красивше.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »