Баг со 100% верт таблицей
вот есть html код
[HTML]<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>123</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="1" height="100%">
<tr>
<td width="51" height="60" class="toptd1" align="center">LOGO</td>
<td width="218" height="60" class="toptd2"> </td>
<td width="648" class="toptd3" height="60">
horizontal menu
</td>
<td class="toptd4" height="60"> </td>
</tr>
<tr>
<td class="targ" align="center" valign="middle">IMG</td>
<td class="izdat_logo" align="center" valign="middle">IMG</td>
<td class="empty_middle"> </td>
<td> </td>
</tr>
<tr>
<td class="emptyundtarg"> </td>
<td class="empty_und_izd"> </td>
<td class="empty_und_emptymid">IMG</td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td class="td_cont" width="648" valign="top">
CONTENT
</td>
<td> </td>
</tr>
</table>
</body>
</html>[/HTML]
а вот его css:
[HTML]html,body {height: 100%; margin: 0px; padding: 0px;}
A IMG {border: none;}[/HTML]
у меня самая внешняя таблица, у всех TD первого ряда заданы height в пикселях 60, в опере смотриться нормально но Эксплорер почему то плюет на эти 60 и тянет первый ряд по вертикали примерно на 1/3 экрана.
Где ошибка?:confused:
[HTML]<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>123</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="1" height="100%">
<tr>
<td width="51" height="60" class="toptd1" align="center">LOGO</td>
<td width="218" height="60" class="toptd2"> </td>
<td width="648" class="toptd3" height="60">
horizontal menu
</td>
<td class="toptd4" height="60"> </td>
</tr>
<tr>
<td class="targ" align="center" valign="middle">IMG</td>
<td class="izdat_logo" align="center" valign="middle">IMG</td>
<td class="empty_middle"> </td>
<td> </td>
</tr>
<tr>
<td class="emptyundtarg"> </td>
<td class="empty_und_izd"> </td>
<td class="empty_und_emptymid">IMG</td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td class="td_cont" width="648" valign="top">
CONTENT
</td>
<td> </td>
</tr>
</table>
</body>
</html>[/HTML]
а вот его css:
[HTML]html,body {height: 100%; margin: 0px; padding: 0px;}
A IMG {border: none;}[/HTML]
у меня самая внешняя таблица, у всех TD первого ряда заданы height в пикселях 60, в опере смотриться нормально но Эксплорер почему то плюет на эти 60 и тянет первый ряд по вертикали примерно на 1/3 экрана.
Где ошибка?:confused:
Эм. Ослик походу подстраивает первый ряд под высоту окна. Или как это прально сказать %)
Задай высоту строк ручками, а ля 60px, 100px, 50px, 100%, или что-то в этом роде %)
Задай высоту строк ручками, а ля 60px, 100px, 50px, 100%, или что-то в этом роде %)
Бойан! Совсем недавно обсуждали такую же проблему: при 2 и более вертикальных ячейках, где у первой жестко указана высота, а вторая тянется, высота первой в ИЕ будет отображаться некорректно.
Вот тема:
http://forum.codenet.ru/showthread.php?t=35069
Вот тема:
http://forum.codenet.ru/showthread.php?t=35069
Цитата: Релорт
Эм. Ослик походу подстраивает первый ряд под высоту окна. Или как это прально сказать %)
Задай высоту строк ручками, а ля 60px, 100px, 50px, 100%, или что-то в этом роде %)
Задай высоту строк ручками, а ля 60px, 100px, 50px, 100%, или что-то в этом роде %)
Как в теме, указанной Комаджу, уже было выяснено, 100% указывать неправильно, поскольку процент отсчитывается от всей высоты таблицы, а не от изменяемой его части. Сам такую ошибку сделал.
Цитата: Комаджу
Бойан! Совсем недавно обсуждали такую же проблему: при 2 и более вертикальных ячейках, где у первой жестко указана высота, а вторая тянется, высота первой в ИЕ будет отображаться некорректно.
Вот тема:
http://forum.codenet.ru/showthread.php?t=35069
Вот тема:
http://forum.codenet.ru/showthread.php?t=35069
почитал, Но там собсенно пробоема была с растягиванием нижней ячейки, и решение этого html, body {height: 100%}
у меня ведь другая проблема в том что ячейку я указываю высоту ее в прикселах а не в процентах
Плохо читали. Там проблема была в том, что тянулась ячейка, у которо была жестко указана высота. Ваша проблема идентична описанной в том топике. Есдинтсвенное, что могу предложить, кроме сказанного там - попробуйте погуглить другой способ, но боюсь, что потратите время.
А чем вам не нравится вариант, реализованный на http://ya.ru/ ?
а есть ли такая трабла при верстании в DIV и вообще каковы еще плюсу перехода с таблиц на дивы?
Кому не нравится?
Цитата: Anton Kharlamov
а есть ли такая трабла при верстании в DIV и вообще каковы еще плюсу перехода с таблиц на дивы?
Таких проблем не будет - но появятся другие ;) Дивы логичнее и в теории дизайн легче изменяем с помощью css.
Цитата: Комаджу
...Дивы логичнее и в теории дизайн легче изменяем с помощью css.
Дивы также помогают нужный текст, контент, размещать выше в странице, что оптимизирует последнюю для поисковиков. Вообще, масса различий есть между верстками, например, "блочная" (css) верстка в среднем подгружается быстрее.
Цитата: Dolonet
"блочная" (css) верстка в среднем подгружается быстрее.
Правильнее сказать иначе: таблица не отобразится пока на клиент не загрузится всё ее содержимое. Из-за чего визуально div грузится быстрее.
Цитата: Dolonet
А чем вам не нравится вариант, реализованный на http://ya.ru/ ?
хех, помоему я уже ничего не соображаю, но там вроде так все сделано как у меня, верхняя ячейка с параметром colspa=2 высота не указана,
а в двух нижних четко прописана высота, правда непонятно почему "1":confused:
Цитата: Anton Kharlamov
хех, помоему я уже ничего не соображаю, но там вроде так все сделано как у меня, верхняя ячейка с параметром colspa=2 высота не указана,
а в двух нижних четко прописана высота, правда непонятно почему "1":confused:
а в двух нижних четко прописана высота, правда непонятно почему "1":confused:
Да не смотрите Вы Лебедевские сайты - там мусорный код всегда.
ЗЫ: Там вложенные таблицы. Если бы Вы читали, о чем я Вам писал выше и в другом топе, Вы бы сразу увидели бы это.
Цитата: Комаджу
Правильнее сказать иначе: таблица не отобразится пока на клиент не загрузится всё ее содержимое. Из-за чего визуально div грузится быстрее.
Не только это. Дивовая верстка может значительно уменьшить размер подгружаемой страницы в HTML, потому как основные стилистические нормы страницы заданы в CSS, которые подгружаются один раз, а потом кешируются. В век GPRS это может значительно сэкономить посетителю трафик, да и серверу тоже. :)
Цитата: Комаджу
Да не смотрите Вы Лебедевские сайты - там мусорный код всегда.
ЗЫ: Там вложенные таблицы. Если бы Вы читали, о чем я Вам писал выше и в другом топе, Вы бы сразу увидели бы это.
ЗЫ: Там вложенные таблицы. Если бы Вы читали, о чем я Вам писал выше и в другом топе, Вы бы сразу увидели бы это.
про вложенные таблицы и отказ от них я понял:)
Цитата: Dolonet
Дивы также помогают нужный текст, контент, размещать выше в странице, что оптимизирует последнюю для поисковиков.
Где-то год назад проводил эксперимент, с целью выяснить, насколько сильно влияние "верхнести" контента для Яндекса. При прочих равных разницы невооруженным глазом не заметил. Однако, и не забанили.
Разметка была вот такая (quirks mode обязателен):
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #333;
background-color: #f6f6f6;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 76%;
* font-size: 73%;
}
table {
margin: 12px;
padding: 0;
clear: both;
}
table, th, td {
border: solid 1px #ccc;
font-size: 10pt;
}
div#cnt {
margin: 0 0 -20px 300px;
padding: 36px 0 20px 0;
border-left: 2px solid #ccc;
min-height: 88%;
* height: 99%;
color: #333;
background-color: #fff;
z-index: 9;
}
div#cnt h1, h2, h3, div#cnt p {
padding: 0 12pt;
clear: both;
}
div#cnt h1, h2, h3 {
text-align: left;
font-weight: normal;
color: #ed7e00;
}
div#cnt h1 {
* font-size: 2em;
}
div#cnt h2 {
* font-size: 1.6em;
}
div#cnt h3 {
* font-size: 1.2em;
}
div#cnt h3, h4, h5, h6, b, strong {
font-weight: bold;
}
div#cnt p {
line-height: 1.5em;
font-family: Verdana, sans-serif;
}
div#cnt img.cnt {
float: left;
padding: 6px;
margin: 0;
border: none;
}
div#leftmenu {
position: absolute;
top: 112px;
left: 0px;
width: 300px;
z-index: 99;
background-color: #f6f6f6;
}
div#leftmenu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
/* border-top: solid 1px #ccc; */
overflow: hidden;
}
div#leftmenu li {
margin: 0;
padding: 0;
width: 100%;
/* border-bottom: solid 1px #ccc; */
border: none;
}
div#leftmenu li a {
display: block;
margin: 0;
padding: 2px 20px 4px 20px;
width: 100%;
height: auto;
text-decoration: none;
color: #333 !important;
background-color: inherit;
overflow: hidden;
white-space: normal;
font-size: 10pt!important;
font-weight: normal;
}
div#leftmenu li a:hover {
cursor: pointer;
text-decoration: underline;
color: #fff !important;
width: 100%;
background-color: #999 !important;
}
div#leftmenu li span.mn {
display: block;
margin: 0;
padding: 2px 20px 4px 20px;
width: 100%;
height: auto;
color: #333 !important;
background-color: #fff;
overflow: hidden;
white-space: normal;
font-size: 10pt!important;
font-weight: bold;
border: none;
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
div#logo {
position: absolute;
top: 0px;
left: 0px;
width: 302px;
height: 102px;
border-bottom: solid 1px #cc9e00;
z-index: 10;
background-color: #404040;
}
div#logocont {
position: absolute;
top: 12px;
left: 0px;
width: 302px;
height: 90px;
background-color: #fc0;
z-index: 9;
}
div#logocont img {
border: none;
}
div#uppmenu {
position: absolute;
margin: 0;
padding: 0;
top: 0;
right: 0;
width: 100%;
height: 36px;
z-index: ;
text-align: right;
border-bottom: 1px solid #ccc;
color: #fff;
background: #404040 url("./img/topbg.gif");
background-repeat: repeat-x;
}
#uppmenu ul{
list-style: none;
padding: 5px 0 0 0;
margin: 0;
white-space: nowrap;
background: transparent;
float: left;
width: 100%;
line-height: 22px;
}
#uppmenu li {display: inline;}
div#uppmenu a, div#uppmenu a:link, div#uppmenu a:visited {
float: right;
padding: 0 20px;
background: #transparent;
border-top: none;
border-right: 1px solid #999;
border-bottom: none;
border-left: none;
color:#fff;
text-decoration:none;
font-weight: bold;
font-family: Tahoma, Verdana, Arial;
font-size: 10pt;
}
#uppmenu ul li a:hover{
color:#000;
background: #ddd;
text-decoration: underline;
}
div#footer {
float: left;
clear: both;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
height: 30px;
border-top: 1px solid #ccc;
color: #fff;
background: #feb925 url("./img/footbg1.gif");
background-repeat: repeat-x;
}
div#copy {
float: left;
width: 360px;
height: 100%;
color: #fff;
vertical-align: baseline;
font-weight: normal;
font-size: 9pt;
background: #404040 url("./img/topbg.gif");
background-repeat: repeat-x;
}
div#copy a:link, div#copy a:visited, div#copy a:active, div#copy a:hover {
text-decoration: none;
color: #ccc;
background-color: #404040;
}
div#copy a:hover{
text-decoration: underline;
}
td.nw {
font-weight: bold;
text-align: right;
white-space: nowrap;
}
div.img {
float: left;
margin: 12px 0 0 12px;
padding: 6px;
border: solid 1px #ccc;
clear: none;
width: 250px;
}
div.img p {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="cnt">
<h1>Контент</h1>
<p></p>
<div id="leftmenu">
<h3>Меню</h3>
<ul>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</div>
<div id="uppmenu">
<ul>
<li><a href="#">Контакты</a></li>
<li><a href="#">Карта сайта</a></li>
<li><a href="#">Главная</a></li>
</ul>
</div>
<div id="logo">
<div id="logocont"><a href="#"><img src="./img/logo.png" width="302px" height="90px" alt="Logo" /></a></div>
</div>
</div>
<div id="footer"><div id="copy"><a href="#" title="Разработка и продвижение сайта">Разработка и продвижение сайта<br />www.xyz.ru © 2005</a></div></div>
</body>
</html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #333;
background-color: #f6f6f6;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 76%;
* font-size: 73%;
}
table {
margin: 12px;
padding: 0;
clear: both;
}
table, th, td {
border: solid 1px #ccc;
font-size: 10pt;
}
div#cnt {
margin: 0 0 -20px 300px;
padding: 36px 0 20px 0;
border-left: 2px solid #ccc;
min-height: 88%;
* height: 99%;
color: #333;
background-color: #fff;
z-index: 9;
}
div#cnt h1, h2, h3, div#cnt p {
padding: 0 12pt;
clear: both;
}
div#cnt h1, h2, h3 {
text-align: left;
font-weight: normal;
color: #ed7e00;
}
div#cnt h1 {
* font-size: 2em;
}
div#cnt h2 {
* font-size: 1.6em;
}
div#cnt h3 {
* font-size: 1.2em;
}
div#cnt h3, h4, h5, h6, b, strong {
font-weight: bold;
}
div#cnt p {
line-height: 1.5em;
font-family: Verdana, sans-serif;
}
div#cnt img.cnt {
float: left;
padding: 6px;
margin: 0;
border: none;
}
div#leftmenu {
position: absolute;
top: 112px;
left: 0px;
width: 300px;
z-index: 99;
background-color: #f6f6f6;
}
div#leftmenu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
/* border-top: solid 1px #ccc; */
overflow: hidden;
}
div#leftmenu li {
margin: 0;
padding: 0;
width: 100%;
/* border-bottom: solid 1px #ccc; */
border: none;
}
div#leftmenu li a {
display: block;
margin: 0;
padding: 2px 20px 4px 20px;
width: 100%;
height: auto;
text-decoration: none;
color: #333 !important;
background-color: inherit;
overflow: hidden;
white-space: normal;
font-size: 10pt!important;
font-weight: normal;
}
div#leftmenu li a:hover {
cursor: pointer;
text-decoration: underline;
color: #fff !important;
width: 100%;
background-color: #999 !important;
}
div#leftmenu li span.mn {
display: block;
margin: 0;
padding: 2px 20px 4px 20px;
width: 100%;
height: auto;
color: #333 !important;
background-color: #fff;
overflow: hidden;
white-space: normal;
font-size: 10pt!important;
font-weight: bold;
border: none;
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
}
div#logo {
position: absolute;
top: 0px;
left: 0px;
width: 302px;
height: 102px;
border-bottom: solid 1px #cc9e00;
z-index: 10;
background-color: #404040;
}
div#logocont {
position: absolute;
top: 12px;
left: 0px;
width: 302px;
height: 90px;
background-color: #fc0;
z-index: 9;
}
div#logocont img {
border: none;
}
div#uppmenu {
position: absolute;
margin: 0;
padding: 0;
top: 0;
right: 0;
width: 100%;
height: 36px;
z-index: ;
text-align: right;
border-bottom: 1px solid #ccc;
color: #fff;
background: #404040 url("./img/topbg.gif");
background-repeat: repeat-x;
}
#uppmenu ul{
list-style: none;
padding: 5px 0 0 0;
margin: 0;
white-space: nowrap;
background: transparent;
float: left;
width: 100%;
line-height: 22px;
}
#uppmenu li {display: inline;}
div#uppmenu a, div#uppmenu a:link, div#uppmenu a:visited {
float: right;
padding: 0 20px;
background: #transparent;
border-top: none;
border-right: 1px solid #999;
border-bottom: none;
border-left: none;
color:#fff;
text-decoration:none;
font-weight: bold;
font-family: Tahoma, Verdana, Arial;
font-size: 10pt;
}
#uppmenu ul li a:hover{
color:#000;
background: #ddd;
text-decoration: underline;
}
div#footer {
float: left;
clear: both;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
height: 30px;
border-top: 1px solid #ccc;
color: #fff;
background: #feb925 url("./img/footbg1.gif");
background-repeat: repeat-x;
}
div#copy {
float: left;
width: 360px;
height: 100%;
color: #fff;
vertical-align: baseline;
font-weight: normal;
font-size: 9pt;
background: #404040 url("./img/topbg.gif");
background-repeat: repeat-x;
}
div#copy a:link, div#copy a:visited, div#copy a:active, div#copy a:hover {
text-decoration: none;
color: #ccc;
background-color: #404040;
}
div#copy a:hover{
text-decoration: underline;
}
td.nw {
font-weight: bold;
text-align: right;
white-space: nowrap;
}
div.img {
float: left;
margin: 12px 0 0 12px;
padding: 6px;
border: solid 1px #ccc;
clear: none;
width: 250px;
}
div.img p {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="cnt">
<h1>Контент</h1>
<p></p>
<div id="leftmenu">
<h3>Меню</h3>
<ul>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</div>
<div id="uppmenu">
<ul>
<li><a href="#">Контакты</a></li>
<li><a href="#">Карта сайта</a></li>
<li><a href="#">Главная</a></li>
</ul>
</div>
<div id="logo">
<div id="logocont"><a href="#"><img src="./img/logo.png" width="302px" height="90px" alt="Logo" /></a></div>
</div>
</div>
<div id="footer"><div id="copy"><a href="#" title="Разработка и продвижение сайта">Разработка и продвижение сайта<br />www.xyz.ru © 2005</a></div></div>
</body>
</html>
кажется понял выход
у внешней таблицы убираю height="100%" то есть она будет тянуться от контента. А саму эту внешнюю таблицу помещаю внутрь другой таблицы(у которой задаю height="100%"), которая состоит из верхней ячейки(в которой старая внешняя таблица) а нижняя ячейка тянется на оставшийся экран.
Что то типо такого:
[HTML]<table height="100%">
<tr>
<td valign="top">старая внешняя таблица(без атрибута height="100%")</td>
</tr>
<tr>
<td>тянучка</td>
</tr>
</table>[/HTML]
что скажете?
у внешней таблицы убираю height="100%" то есть она будет тянуться от контента. А саму эту внешнюю таблицу помещаю внутрь другой таблицы(у которой задаю height="100%"), которая состоит из верхней ячейки(в которой старая внешняя таблица) а нижняя ячейка тянется на оставшийся экран.
Что то типо такого:
[HTML]<table height="100%">
<tr>
<td valign="top">старая внешняя таблица(без атрибута height="100%")</td>
</tr>
<tr>
<td>тянучка</td>
</tr>
</table>[/HTML]
что скажете?
Просто попробуй :) Или ты предлагаешь нам попробовать и сказать, что получилось?
it works:)