Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11679
Последний выпуск: 19.06.2015

Почему меняются правила HTML разметки, если поместить код в ячейку таблицы?

1.8K
27 апреля 2010 года
xexsus
33 / / 19.11.2004
2 одинаковых куска простого HTML-кода, один помещаем в ячейку таблицы и законы HTML разметки для него перестают работать.
Не могу понять причину.

Пробовал в последних FireFox и Chrome.

Пример: http://xexsus.com/misc/example.html

Код:
<!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" xml:lang="ru" lang="ru">
<body>


<!-- кусок кода, НАЧАЛО -->
<div style="width:60%;">

<div style="width:100%; background-color:#FFF242;">
<div style="overflow:hidden;width:100%; background-color:#70FF38;">
<br/>

<div style="background-color:#FF075A;">
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>

<br/>
</div>
</div>

</div>
<!-- кусок кода, КОНЕЦ -->



<br/><br/>
<!-- Теперь тоже самое, но в ячейке таблицы. Браузер рисует совсем другую картину -->



<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
 <td>

<!-- кусок кода, НАЧАЛО -->
<div style="width:60%;">

<div style="width:100%; background-color:#FFF242;">
<div style="overflow:hidden;width:100%; background-color:#70FF38;">
<br/>

<div style="background-color:#FF075A;">
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>

<br/>
</div>
</div>

</div>
<!-- кусок кода, КОНЕЦ -->

</td>
</tr>
</table>



</body>
</html>
1.8K
28 апреля 2010 года
xexsus
33 / / 19.11.2004
Проблема решена. Волшебные слова: table-layout: fixed;

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог