Ссылку с вложенной таблицой не работает в IE

santik · March 16, 2012

Доброго всем времени суток.

Столкнулся со следующей проблемой при верстке шаблона.

На сайте есть много разделов с оборудованием. Ссылки на разделы реализованы в виде списка в боковом меню

<ul>

<li>

<td class="sidebar-text">GSM- комплекты</td>

</tr>

</tbody></table>

</li></a>

....

</ul>

Вот выложил пример (для удобства блоки выделил цветом)

http://isantik.ru/site/vosco/problem-link.htm

В лисе и опере ссылки работают нормально, но в IE 9.0 при клике по ячейке с текстом ссылка не срабатывает.

Может кто подскажет в чем дело?

Заранее благодарю за ответы.

wildhind · March 16, 2012

Дело в неправильной вложенности элементов.

Элемент ul может содержать только элементы li.

А уже в li можно делать ссылки.

Но вообще-то в вашем случае таблица не нужна совершенно.

santik · March 16, 2012

Согласен с вами. Возможно код построен не самым корректным образом. Но перенос тега a внутрь li проблемы не решает.

alexandr_v-vich · March 16, 2012

Сократил немного....


<a href="/">      
    <table><tbody><tr>
        <td><img src="http://isantik.ru/site/vosco/box.png"></td>
        <td>GSM- комплекты</td>
    </tr></tbody></table>
</a>

Интересно, интересно...первый раз такое встречаю )

Edited March 16, 2012 by alexandr_v-vich

wildhind · March 16, 2012

Кстати, а как приведённая конструкция соотносится с этой строкой?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

alexandr_v-vich · March 16, 2012

wildhind, По-моему не важно...

Ещё круче

http://jsfiddle.net/ND8Wt/39/

wildhind · March 16, 2012

Может и не важно.

Я просто это к тому, что незачем городить невероятные конструкции, когда можно сделать просто:


<nav>
<a href="/">GSM-комплекты</a>
<a href="some_else">Ещё какая-то ссылка</a>
<a href="../">42</a>
</nav>

santik · March 16, 2012

DOCTYPE был сгенерирован автоматом для этого примера.

alexandr_v-vich · March 16, 2012

Может и не важно.
Я просто это к тому, что незачем городить невероятные конструкции, когда можно сделать просто:
<nav>
<a href="/">GSM-комплекты</a>
<a href="some_else">Ещё какая-то ссылка</a>
<a href="../">42</a>
</nav>

Ну это несомненно.

Только вопрос то, в IE нельзя ячейку сделать ссылкой??? И почему картинку, при этом, в ячейке можно?...давно я так не удивлялся, видимо о таблицах знаю мало...=/

santik · March 16, 2012

Может и не важно.
Я просто это к тому, что незачем городить невероятные конструкции, когда можно сделать просто:
<nav>
<a href="/">GSM-комплекты</a>
<a href="some_else">Ещё какая-то ссылка</a>
<a href="../">42</a>
</nav>

К ссылке есть свои требования и проще всего было реализовать ссылку таблицей. т.к. картинка должна быть слева и вертикально по центру, текст долже быть сдвинут от картинки на 20px и быть, так же вертикально! центрирован.

wildhind · March 16, 2012


nav a {
display: table-cell;
vertical-align: middle;
}
nav a img {
margin-right: 20px;
}

это имелось в виду?

santik · March 16, 2012


nav a {
display: table-cell;
vertical-align: middle;
}
nav a img {
margin-right: 20px;
}

это имелось в виду?

Теоретически да.

Но тег nav я склоняюсь не использовать, т.к. многие браузеры его не знают.

К тому же конструкция


nav a {
display: table-cell;
vertical-align: middle;
}

лично у меня не сработала, текст не центрируется.

wildhind · March 16, 2012

1. Не знаю ни одного браузера, который можно рассматривать всерьёз, и который бы при этом не знал тэга nav;

2. Знаю ископаемые IE, которые не знают этого тэга, но почти все разработчики знают решение html5shiv, позволяющее обучить старые версии IE новым тэгам;

3. Если несмотря на это тэг nav вам всё равно не нравится, замените его на div. Результат будет тот же самый.

Sign In

Ссылку с вложенной таблицой не работает в IE

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information