Xpoint
   [напомнить пароль]

высота строки

Метки: [без меток]
2007-09-27 15:13:44 [обр] TKV(1/12)[досье]

Заранее прошу простить, скорее всего данная тема обсуждалась много раз. Но видимо не о тем ключевым словам произвожу поиск :(

Проблема такая. Имеется таблица растянутая по высоте на 100%. Имеются три строки. И три столбика

схематически это выглядит так

<table>
<tr>
 <td rowspan=3></td>
 <td>header</td>
 <td rowspan=3></td>
</tr>
<tr>
 <td>content</td>
</tr>
<tr>
 <td>footer</td>
</tr>
</table>

проблема в том что высота у хедера и футера устанавливается неправильно. скажем ставлю 170 и 40, а фактически гораздо больше выходит. В лисе все нормально. В ИЕ тоже нормально, но только если сбросить в квирк мод.

спустя 51 минуту [обр] Валера(0/24)[досье]
ну это может зависеть от содержимого хедера и футера, например, если в них картинка, которая вылазить за высоту или ширину, то понятно что все разъедется и ничего с этим не поделаешь. Или вы что-то другое имеете ввиду? На этом примере не понятно, приведите пример где видно что и куда разъезжается.
спустя 11 минут [обр] TKV(1/12)[досье]
Валера[досье], я всетки не совсем нуб... ) в хедере у меня два дива, один высотой 105, второй высотой 35. в футере один див высотой 40. К тому же, как я уже упомянул, в квиркс мод все отображается нормально. Более того в лисе так же все отображается нормально. Пример сейчас постараюсь запостить
спустя 6 минут [обр] TKV(1/12)[досье]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site</title>
<style type="text/css">
<!--
body, html {
   margin:0;
   padding:0;
   height:100%;
}

body {
   padding-left:7%;
   padding-right:7%;
   background-color:#EBEBEB;
}

#wraper {
   height:100%;
   width:100%;
   background-color:#FFFFFF;
}

.leftBorder {
   background:url(images/left_border.gif) repeat-y;
   width:8px;
}
.rightBorder {
   background:url(images/right_border.gif) repeat-y;
   width:8px;
}

#header {
   width:100%;
   height:105px;
   background:url(images/h_line.gif) bottom repeat-x #990000;
}

#headerTd {
   padding-left:5px;
   padding-right:5px;
   height:140px;
}

#hMenu {
   height:35px;
   width:100%;
   background:url(images/h_line.gif) bottom repeat-x;   
}
#footerTd {
   padding-left:5px;
   padding-right:5px;
   height:40px;
   color:#FFFFFF;
}

div.footerTd {
   background:url(images/h_line.gif) top repeat-x #951c1c;   
   font-size:11px;
   text-align:center;
   line-height:40px;

}

td.bodyTd {
   padding-left:5px;
   padding-right:5px;
}

td.bodyTd table {
   height:100%;
   padding:0;
   margin:0;
}
-->
</style>
</head>
<body>
<table cellpadding="0" border="0" cellspacing="0" id="wraper">
   <tr>   
       <td class="leftBorder" rowspan="3"><img src="images/dot.gif" width=1 /></td>
        <td valign="top" id="headerTd" align="center">
           <div id="header">
         <div class="grad">
          картинка высотой 105px
         </div>
      </div>
            <div id="hMenu">&nbsp;</div>
        </td>
       <td class="rightBorder" rowspan="3"><img src="images/dot.gif" width=1 /></td>
    </tr>
    <tr>
       <td class="bodyTd" height="700" valign="top">
               content      
        </td>
    </tr>
   <tr>
       <td id="footerTd" valign="bottom">
           <div class="footerTd">
               copyright
            </div>
        </td>
    </tr>
</table>
</body>
</html>
спустя 1 час [обр] Валера(0/24)[досье]
проблема в том что высота у хедера и футера устанавливается неправильно. скажем ставлю 170 и 40, а фактически гораздо больше выходит.
что значит устанавливается неправильно?
спустя 29 минут [обр] Илья Cтpeльцын aka SelenIT(15/171)[досье]

TKV[досье], насколько я знаю, это проблема очень старая и она "не лечится". До появления 7-го IE это можно было обойти, указав <?xml>-декларацию перед доктайпом — страница оставалась валидной, а IE переходил в Quirks mode. С IE7 такой финт увы, не проходит. Я бы предложил отказаться от таблицы в пользу 100-го дива с отрицательными верхним и нижним маргинами, на которые наложатся хедер и футер.

А высота строчек при rowspan-е в IE — это вообще отдельная история, насколько я знаю, в общем случае решения так и не нашли ни при каком режиме рендеринга...

спустя 46 минут [обр] TKV(1/12)[досье]

Валера[досье] ну вот Илья объяснил )

Илья Cтpeльцын aka SelenIT[досье]
спасибо, про отрицательный маргин знал, но забыл, так как верстаю не часто. =)

ну раз совсем не лечится, то и бог с ним. буду делать дивом

Powered by POEM™ Engine Copyright © 2002-2005