[HTML, CSS, IE] неправильная высота

walder

Есть ячейка таблицы, внутри которой есть ещё таблица.
Таблица-родитель растягивается по вертикали до размеров окна браузера, либо, если содержимое её внутренностей боольшое - до необходимой высоты, обусловленной контентом.
У внутренней таблицы height:100%, но в IE даже при очень высокой таблице-родителе выста внутренней таблицы составляет реальный размер 100% высоты окна браузера, а не всю высоту таблицы-родителя. В файрфоксе/опере проблем нет.
Доктайп такой:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
При его убирании в ИЕ таблица начинает работать правильно, но страшно ругается валидатор.

dadelos

сделай <td height=100%> ячейки родительской таблицы в которой таблицу поместил.

pitrik2

вообще-то у td нет атрибута height
так что за такой совет нужно в шею гнать

а товарищу я скажу что так задавать вопрос нет смысла
ты бы взял ноутепад, написал бы простенький примерчик (тойсть фактически то что у тебя есть, но не в полном виде, а только тот кусочек который важен)
проверил что этот пример и вправду не работает
и запостил его сюда
я бы тебе тут же сказал в какой строчке ошибка

walder

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style>
html{height:100%}
body{height:100%;padding:0px;margin:0px}
table{border:0px;border-collapse:collapse}
table td{padding:0px;vertical-align:top}
#main{width:100%;height:100%;border:1px solid red}
#int{width:100px;height:100%;border:1px solid green}
</style>
</head>
<body>
<table id="main">
<tr>
<td>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</td>
<td>
<table id="int">
<tr><td><br></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

walder

если так сделать, то в данном случае как раз и получится, что выстоа внутренней таблицы будет не 100% высоты родительской таблицы, а 100% высоты окна браузера. Да и через валидатор такаястраница не пройдёт.

pitrik2

хех
а какой валидатор ругается?
может есть смысл другой доктайп подобрать?

pitrik2

дело в том, что если атрибут height в CSS указать в процентах, то это будут проценты от высоты контента, а не внешнего модуля
в IE 5.5 проценты считались от высоты родителя, а не детей
поэтому если поставить другой доктайп
например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
то ИЕ6 будет думать что это неправильный доктайп, переключится на Quirks Mode
и покажет то, что ты хочешь
что там с валидатором, я уж не знаю какой у тебя валидатор
а вообще растягивание на 100% это отдельная тема
и существует куча методик как это сделать, чтобы работало во всех браузерах

dedwowan

Вообще-то есть, судя по использованым dtd
<!ATTLIST (TH|TD) -- header or data cell --
%attrs; -- %coreattrs, %i18n, %events --
abbr %Text; #IMPLIED -- abbreviation for header cell --
axis CDATA #IMPLIED -- comma-separated list of related headers--
headers IDREFS #IMPLIED -- list of id's for header cells --
scope %Scope; #IMPLIED -- scope covered by header cells --
rowspan NUMBER 1 -- number of rows spanned by cell --
colspan NUMBER 1 -- number of cols spanned by cell --
%cellhalign; -- horizontal alignment in cells --
%cellvalign; -- vertical alignment in cells --
nowrap (nowrap) #IMPLIED -- suppress word wrap --
bgcolor %Color; #IMPLIED -- cell background color --
width %Length; #IMPLIED -- width for cell --
height %Length; #IMPLIED -- height for cell --
>

dedwowan

Подозреваю, что при исользовании последней dtd'ки - никак, если не использовать средства JS

dadelos

да ты че!

pitrik2

http://www.w3.org/TR/html4/struct/tables.html#h-11.2.6
русским языком написано: DEPRECATED
потому что height у td - это абсурд, масло масляное
высота td всегда равна высоте tr
точно также у tr нету атрибута width
потому что ширина tr всегда равна ширине таблицы

uncle17

ширина tr всегда равна ширине таблицы

не забудь про rowspan

pitrik2

не забудь про rowspan

и при чем тут роуспан?

uncle17

не всегда ширина tr равна ширине таблицы.

pitrik2

а пример можешь привести?
тойсть имеется ввиду взять ширину tr на жаваскрипте и показать что она совсем другая чем ожидается
но даже если и приведешь пример, то это не противоречит тому что width у tr бесмысслен

uncle17

и это тоже

remenchik

Имхо, имелось ввиду colspan по поводу вашей фразы:
> высота td всегда равна высоте tr

uncle17

это не противоречит тому что width у tr бесмысслен

а я и не спорил. Она задается исключительно входящими td

pitrik2

и все таки Федечка, ты гонишь



<table border="1"><tr id="tr1">

  <td id="td1" rowspan="2" width="100px">aaa</td>

  <td id="td2" colspan="2" width="200px">bbb</td>

</tr><tr id="tr2">

  <td width="100px">111</td>

  <td>222</td>

</tr></table>  

<input type="button" onclick="show" value="show">

<script type="text/javascript">

function show {

alert(document.getElementById('tr1').offsetWidth);

alert(document.getElementById('tr2').offsetWidth);

alert(document.getElementById('td1').offsetHeight);

alert(document.getElementById('td2').offsetHeight);

}

</script>

pitrik2

вот здесь согласен
это я обшибся
высота td равна сумме высот tr которые он занимает

walder

А поподробнее про методики растяжки на 100% можно? Ссылочки какие-нибудь или так, вкратце...

pitrik2

вопрос состоит скорей не как сделать height=100%
а как добиться того что нужно другим способом
вот тебе зачем нужно растягивать внутреннюю таблицу?
чтобы бэкграундом раскрасить? дык ты можешь раскрасить бэкграундом td внешней таблицы и будет тоже самое
или хочешь чтобы снизу чтото появилось?
тогда так:
<body>
<table style="height:100%">
<tr>
<td rowspan="2"> long left menu </td>
<td> content of second table </td>
</tr><tr style="height:100%"><td valign="bottom">
bottom content
</td></tr>
</table>

maggi14

а если я просто хочу, чтобы что-то было посередине страницы?

pitrik2

ну сделай
<td valign="middle"> - внешняя таблица
<table> - внутрення таблица

dedwowan

Это настолько старый и избитый вопрос, что я даже удивился, как ты можешь этого не знать

maggi14

и? что будет? Если я не задал для внешней таблицы высоту 100%, все схлопнется.

maggi14

я знаю на него ответ. Но только один (все внешние контейрены сделать 100% а мне обещали несколько.

pitrik2

а кто говорил что у внешней не нужно задавать сто процентов?
?
у внешней таблицы как раз height=100% будет работать всегда
не будет только у внутренних

dedwowan

Попробуй эту фигню в опере посмотреть и пойми насколько ты ошибаешься.

dedwowan

я знаю на него ответ. Но только один (все внешние контейрены сделать 100% а мне обещали несколько.

Мне вот кстати интересно, а без таблиц такое делать научились, али нет.
Вариант с внешним дивом, в котором каким-то раком умудрились прописать валигн=миддл не подходит, т.к. не решает проблем из-за которых имеет смысл уходить от таблиц.

pitrik2

Попробуй эту фигню в опере посмотреть и пойми насколько ты ошибаешься.

какую фигню?
я уже ничего не понимаю
вот это работает во всх браузерах
или вы про что?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style>
html{height:100%}
body{height:100%;padding:0px;margin:0px}
</style>
</head>
<body>
<table style="height:100%;width:100%">
<tr style="height:100%">
<td valign="middle" align="center">
This text is in center in all browsers.
</td>
</tr>
</table>
</body>
</html>

dedwowan

Мда, действительно отстал я от жизни. В последних операх уже работает -

pitrik2

в семерке такое точняк работало
просто многие забывали html {height:100%} указывать
а еще многие забывали указывать form {height:100%}
а то часто бывало:
<body>
<form>
...
и этот form оперу перебивал нафик
а пп того как в CSS центрировать вертикально, то вроде все методики изучены и новые вряд ли кто придумает
все они перечислены тута:
http://www.student.oulu.fi/~laurirai/www/css/middle/

dadelos

если ты обратил внимание там еще куча всего Deprecated для этого тэга, однако для обратной совместимости все нормально работает начиная с 4-х версий НН и ИЭ и будет работать еще долго и на других браузерах.

walder

У меня внутри вложена таблица, у которой на одном из TR у одного из TD сделан бордер в 1 пиксел - это вертикальная линия - визуально она отделяет центральную часть от боковой.

pitrik2

и какие проблемы?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
</head>
<body>
<style type="text/css">
html {height:100%;}
body {height:100%;}
</style>
<body>
<table style="height:100%;width:100%">
<tr style="height:99%">
<td style="background-color:#ccffff;width:100px"> left menu </td>
<td style="border-left:1px solid blue"> content </td>
</tr><tr style="height:1%"><td colspan="2" valign="bottom" style="background-color:#ffccff">
copyright
</td></tr>
</table>
</body>
</html>

walder

Внимательнее прочти - мне нужно именно для ВЛОЖЕННОЙ таблицы это сделать. Внешней не могу. Если интересно - дам ссылку на реальный сайт.

stm7884696

давай

walder

Можно конечно скриптом нужную высоту устанавливать в случае, если браузер - ие или в самом стиле прописать height:expression...
Но мне кажется, что это не самый лучший выход. Возможно, именно для этих целей есть хак для ие.

pitrik2

а ссылку на реальный сайт так и не дал

walder

Выставочный центр DeltaExpo

pitrik2

мдааа
может сначала стоит ошибки в коде поправить, а потом уже таблички растягивать?
я смотрю конкретно вот эту страницу:
http://deltaexpo.com/index.php?option=com_content&task=v...
тут такой код:
<>
<td>
а должен быть такой:
<>
</td>

pitrik2

вот код который работает в ИЕ
я вынес твой блок рекламы во внешнюю таблицу
ты тут же спросишь почему код в некоторых местах разъезжается
я тебе отвечу
вот так:
<tr><td colspan="2" height="8"></td></tr>
делать нельзя. нужно делать вот так:
<tr><td colspan="2" height="8"><img src="space.gif" height="8" width="1"></td></tr>
дело в том что height=8 у таблицы - это предписание, если браузер хочет, он его ослушается
а вот height=8 у картинки - это указание, его браузер ослушаться никак не может, как ьы ни хотел
картинка space.gif - один прозрачный пиксель

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head>

<title>Виртуальный выставочный центр ДельтаЭкспо - Информация</title>

<meta name="title" content="Информация" />

<meta name="author" content="Administrator" />

<meta name="description" content="ДельтаЭкспо. Международный виртуальный выставочный центр. Организация виртуальных выставок. Проведение выставочных мероприятий, новости, справочная информация. Пресс-релизы, презентации, 3D-модели." />

<meta name="keywords" content="официальный сайт дельтаэкспо, выставочная деятельность, новости выставок, выставочный бизнес" />

<meta name="Generator" content="Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved." />

<meta name="robots" content="index, follow" />

<base href="http://deltaexpo.com/" />

	<link rel="shortcut icon" href="http://deltaexpo.com/images/favicon.ico" />

	<link href="http://deltaexpo.com/templates/css/main.css" type="text/css" rel="stylesheet">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="revisit-after" content="6days">

<meta name="author" content="Отдел Информационных технологий ДельтаЭкспо">

<meta name="copyright" content="www.deltaexpo.com">

<meta http-equiv="imagetoolbar" content="no">

</head>

<body>

<table id="main">

<tr><td height="7" bgcolor="#cecdcd" colspan="2"></td></tr>

<tr>

<td height="80" align="left" colspan="2">

 

<table width="100%" class="h80">

<tr>

       <td width="202" id="hl1"><a href="index.php"><img src="http://deltaexpo.com/images/logo.gif" width="174" height="32" border="0" alt="ДельтаЭкспо"></a></td>

       <td align="center"><a href="index.php">

	   <img src="http://deltaexpo.com/images/banner.gif" width="401" height="40" id="hl2" border="0" alt="Первый международный виртуальный выставочный центр ДельтаЭкспо"></a></td>

       <td width="202">

	   <table width="255" class="h80">

	   <tr>

	   <td class="h60">

<>

	<div id="gl">

	<form method="post" action="">

	<select id="lg" name="lang">

	<option>Русский</option>

	<option>English</option>

	</select>

	</form>

	</div>

<>

	   

	   </td>

	   </tr>

	   <tr>

	   <td align="left" valign="middle">

	   <img src="http://deltaexpo.com/images/ar.gif" class="ar" width="3" height="5" border="0" alt="На главную"><a href="index.php" class="t"><span>На главную</span></a>

	   <img src="http://deltaexpo.com/images/ar.gif" class="ar" width="3" height="5" border="0" alt="Вход"><a href="login.php" class="t"><span>Вход</span></a>

	   <img src="http://deltaexpo.com/images/ar.gif" class="ar" width="3" height="5" border="0" alt="Карта сайта"><a href="index.php?option=com_samsitemap&Itemid=47" class="t"><span>Карта сайта</span></a>

	   </td>

	   </tr>

	   </table>	   

	   </td>

</tr>

</table>

</td>

</tr>

<tr><td height="10" bgcolor="#2f496e" colspan="2"></td></tr>

<tr><td height="35" valign="middle" bgcolor="#e3e3e3" colspan="2">

<>

	<table id="mn">

	<tr>

	<td><div id="pp"></div></td>

	<td class="in"><a href="index.php?option=com_content&task=view&id=12&Itemid=44" title="Перйти к разделу «Информация»">Информация</a></td>

	<td class="in"><a href="" title="Перйти к разделу «Выставочный центр»">Выставочный центр</a></td>

	<td class="in"><a href="" title="Перйти к разделу «Выставки»">Выставки</a></td>

	<td class="in"><a href="" title="Перйти к разделу «Услуги»">Услуги</a></td>

	<td class="in"><a href="index.php?option=com_contact&Itemid=3" title="Перйти к разделу «Контакты»">Контакты</a></td>

	<td id="pl"></td>

	</tr>

	</table>

<>

</td></tr>

<tr><td height="10" colspan="2"></td></tr>

<tr><td align="left" class="ctn" colspan="1">

	   

<table class="fs">

<tr>

<td width="220" align="left">

	    

	   <>

	   

	   

<table id="sr">

	        <tr>

            <td class="sp" height="31"></td>

            <td class="c" colspan="2" height="31">Поиск по сайту</td>

        </tr>

		    <tr>

        <td class="sp" height="22"></td>

        <td class="c" colspan="2" height="22"><form name="searchform" action="index.php?option=com_search&Itemid=5" method="get"><input name="searchword" maxlength="20" alt="search" type="text"><input type="hidden" name="option" value="com_search"><input type="hidden" name="Itemid" value="5"></form></td>

    </tr>

    <tr>

        <td class="sp" height="31"></td>

        <td class="c" height="31" align="left"><img src="http://deltaexpo.com/images/ar.gif" width="3" height="5" border="0" class="ar2" alt="Искать"><a href="http://deltaexpo.com" onclick="searchform.submit;return false;">Искать</a></td>

        <td align="right"><img src="http://deltaexpo.com/images/ar.gif" width="3" height="5" border="0" class="ar2" alt="Расширенный поиск"><a href="http://deltaexpo.com/index.php?option=com_search&Itemid=5">Расширенный поиск</a></td>

    </tr>

</table>	   

	   <>

	   

	   <>

	   

	   <div id="ads">

	   <a href="http://auto.deltaexpo.ru"><img src="http://deltaexpo.com/images/ban2005.jpg" width="220" height="116" border="0" alt="Подробнее об Авто 2006"></a>

	   </div>

	   

	   <>

	   

	   <>

	   

       <div class="mmn">

	   

        <table id="qh">

		            <tr><td class="rh2"></td><td align="left" id="rh4">

            <img src="/images/h2.gif" width="49" height="14" border="0" alt="Опрос"></td></tr>

			        <tr

walder

Огромнейшее спасибо!
Кстати, а если высоту стилем задать, разве тоже это будет не жесткая высота? Раньше думал, что прозрачные гифы только как распорки используются, а не наоборот как антирастяжки.
А в чем суть писать colspan="1"? Это не одно и то же, если бы вообще не писать?

pitrik2

> colspan="1"
это случайно получилось, удалить забыл
> Кстати, а если высоту стилем задать, разве тоже это будет не жесткая высота?
нет, не будет
смысл такой: браузеры пытаются показать всё правильно
если ты создашь абсурдную ситуацию, например <table width="100"><tr><td width="50"></td><td width="60"></td></tr></table>
50 + 60 != 100
то что делать браузеру?
одно из трех правил ему придется нарушить

а в случае картинки
он ее ужать никак не сможет - это как бы внешний объект, он браузеру неподвластен
по поводу растяжки?
это где это я его как антирастяжку использую?
просто я не могу твои стили править, это уж ты сам
смысл такой:
ты должен там прописать height:99% у последнего tr в баннерной табличке
изза этого ИЕ прогнорирует твои мнимые растяжки в верхних tr и сожмет баннерную табличку
вот тут и нужно будет ее растянуть
так что картинки для растяжки используются
для антирастяжки используется правильная расстановка высот у tr

Оставить комментарий