Проблемы с табличной версткой в WinIE

Darkside · July 16, 2007

Доброго дня!

Занимаюсь табличной версткой. Вот код макета (с вложенной таблицей):

<!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=windows-1251" />
<title>Table Layout</title>
<style type="text/css">
html,body {
  margin:0;
  padding:0;
}

html {
  height:100%;
}
body {
  height:100%;
  padding:0; margin:0 auto;
  width:80%;
  min-height:100%;
  position:relative;
}
*html body {
  height:100%;
}
table {
  width:100%;
  height:100%;
  border:1px solid #000000;
  vertical-align:top;
}
td {
  border:1px solid #000000;
}
</style>
</head>

<body>
<table cellspacing="0" cellpadding="0">
  <tr>
	<td width="200"> </td>
	<td>
	<table cellspacing="0" cellpadding="0" style="border-color:#FF0000; margin:3px;">
	  <tr>
		<td height="200"> </td>
	  </tr>
	  <tr>
		<td> </td>
	  </tr>
	</table>
	</td>
  </tr>

  <tr>
	<td colspan="2" style="height:80px"></td>
  </tr>
</table>
</body>
</html>

проблема в том, что IE не понимает высоту 80px футера. и не выравнивает по вертикали вложенную таблицу

когда убираешь

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

IE таблицы отображает правильно, но не воспринимает стиль

body { width:80%; }

В FF и Opera все отлично.

И еще сопутствующий вопрос: не подскажете, сложно ли такой макет сверстать блоками и есть ли в этом случае смысл в переходе на блочную верстку.

Спасибо за ответы

strix · July 16, 2007

И еще сопутствующий вопрос: не подскажете, сложно ли такой макет сверстать блоками и есть ли в этом случае смысл в переходе на блочную верстку.

Вопрос о сложности - относительный

Смысл в переходе на блочную верстку данного каркаса макета есть. Я, например, не вспомню, как сверстать такое таблицами

Darkside · July 16, 2007

2 strix сверстать то можно... но задать высоту футера наверное не получится

Darkside · July 16, 2007

у меня еще попутный вопрос

почему, когда в футере добавляешь div, то сверху и снизу появляются какие-то отступы

<tr>
 <td colspan="2"><div style="height:80px; border:2px solid #0000FF;"></div></td>
 </tr>

ARA · July 16, 2007

мдя... сверстал бы ты лучше это дивами, и проще, и проблем меньше Покажи макет, я прикину ...!

strix · July 16, 2007

2 strix сверстать то можно... но задать высоту футера наверное не получится

это и есть в моем понимании сверстать

почему, когда в футере добавляешь div, то сверху и снизу появляются какие-то отступы

потому что высоту вы задали для div, а не ячейки. Отступы - из-за того, что высота родительской ячейки больше.

Попробуйте поискать в любимой поисковой системе "подвал css" или варианты. Найд?те вагон решений. А вот появятся конкретные вопросы - пожалуйста сюда

Darkside · July 16, 2007

2 ARA

Макет такой как в моем примере. Требования: резиновый дизайн, 100% по высоте, 80% по ширине, высота шапки и футера фиксированная. Если непонятно, могу картинку залить

ARA · July 16, 2007

давайка залей, я гляну на это чудо!

Darkside · July 16, 2007

ща нарисую попонятнее

Darkside · July 16, 2007

вот макет (упрощенный) с основными блоками

strix · July 16, 2007

прекрасно делается блоками :-)

Darkside · July 16, 2007

2 strix

у меня даже есть вариант блочной версти, но в Опере не работает

<!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=windows-1251" />
<title></title>
<style type="text/css">
/* CSS Document */

/* Layout ******************/

html,body {
 margin:0;
 padding:0;
} 

html {
 height:100%;
}

body {
 padding:0; margin:0 auto;
 width:80%;
 min-height:100%;
 position:relative;
}

* html body {
 height:100%;
}

#wrap{
/* width:100%;*/
 background:#999999;
}
#menu{
 float:left;
 position:absolute;
 height: auto;
 min-height: 100%;
 bottom:0;
 width:30%;
 background:#3C7468;
}
* html #menu {
 height:100%;
}
#logo {
 margin-top:20px;
 background:#1B493E;
}
#head{
 float:right;
 width:70%;
 background:#F8C300;
 height:200px;
}
#main{
 float:right;
 width:70%;
 height:350px;
 background:#FFFFFF;
}
#footer{
 position:absolute;
 bottom:0;
 width:100%;
 height:80px;
 background:#F8C300;
 clear:both;
 padding:1px 0;
}


/* Fonts *******************/
body {
 font:10pt Tahoma, Sans-Serif;
}

h1 {
 font-size:180%;
 letter-spacing:1px;
}

/* Colors ******************/
body {
 background:#FFFFFF 
}

html {
 background:url(img/bg2.png) repeat-x;
}
</style>
</head>

<body>
<div id="wrap">

 <div id="menu">132
 <div id="logo">logo
 </div>
 </div>

 <div id="head">123
 </div>

 <div id="main">123
 </div>

 <div id="footer">FOOTER (подвал)
 </div>
</div>
</body>
</html>

Darkside · July 16, 2007

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

ARA · July 16, 2007

Darkside там же все просто! Чего не получается?

Darkside · July 16, 2007

говорю ж в Опере левая колонка не отображается. код блоками я выше привел

я думаю заново начать. так правильно будет: делаем две колонки и футер. правую колонками дивами бьем на две части?

ARA · July 16, 2007

Делаешь контейнер, в нем левую, и правую колунку, которые выравниваются, и подвал, без обтекания! А потом все остальное внутрь, дело техники

Darkside · July 16, 2007

спасбо... да точно, я про контейнер забыл...

ARA далеко не уходи. буду совета спрашивать)))

Darkside · July 16, 2007

вопросик. как лучше приведенный макет сделать

1 float'ом

2 позиционированием

Scrum · July 16, 2007

и подвал, без обтекания!

по ходу предлагал флоатами, я б то же флоатами сделал.

ARA · July 17, 2007

В общем вот! Единственное отличие, то что он не растягивается на 100% по вертикали, с этим возникли проблемы, да оно тебе это надо?

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

Проверял в IE6, Opera 9.01, Mozilla Firefox 2.0.0.1, при разрешение 800x600 до 1280x1024, все пучком!

Ни че сложного! Смотри разбирайся!

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css"><!--
html, body {
margin: 0px;
padding: 0px;
background: #c0c0c0;
border: none;}

#carrier {
width: 80%;
height: auto;
margin: auto;
padding: 0px;
background: #ff9;
border: none;
position: relative;
z-index: 2;}

#pod {
width: 100%;
height: 250px;
margin: 0px;
padding: 0px;
border: none;
background: #a4a4a4;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;}

#left {
width: 250px;
height: 800px;
margin: 0px;
padding: 0px;
background: #ff4;
border: none;
float: left;}
#logo {width: 150px; height: 150px; margin: 15px auto 20px auto; padding: 0px; background: red;}
.knopki {width: 150px; height: 30px; padding: 0px;}
#k1 {background: #c90; margin-top: 170px; position: relative; left: 110px;}
#k2 {background: #6c3; margin-top: 5px; position: relative; left: 110px;}

#right {
width: auto;
height: auto;
margin: 0px 0px 0px 250px;
padding: 0px;
background: #ff6;
border: none;}

#block {
width: auto;
height: 250px;
margin: 0px 5px;
padding: 0px;
background: #39c;}
.zag {width: auto; height: 30px; margin: 0px; padding: 0px; background: green;}

#content {
width: auto;
height: auto;
margin: 100px 10px 10px 10px;
padding: 5px;
background: #fff;
border: none;}

#footer {
width: 100%;
height: 60px;
margin: 0px;
padding: 0px;
background: green;
border: none;
clear: both;}

//--></style>
</head>

<body>

<div id="pod"><!-- --></div>

<div id="carrier">
 <div id="left">
 <div id="logo"><!-- --></div>
 <div class="knopki" id="k1"><!-- --></div>
 <div class="knopki" id="k2"><!-- --></div>
 </div>
 <div id="right">
 <div class="zag"><!-- --></div>
 <div id="block"><!-- --></div>
 <div class="zag"><!-- --></div>
 <div id="content">
 <p>Философия натурально осмысляет примитивный смысл жизни. Частное творит конфликт. Жизнь, как следует из вышесказанного, преобразует сложный интеллект, ломая рамки привычных представлений. Постмодернизм реально создает закон внешнего мира.</p>
 <p>Отношение к современности, следовательно, представляет онтологический принцип восприятия. Отсюда естественно следует, что объект деятельности, как принято считать, неоднозначен. Любовь решительно порождает и обеспечивает интеллект. Структурализм, пренебрегая деталями, ментально принимает во внимание смысл жизни. Наряду с этим универсальное методологически творит конфликт.</p>
 <p>Страсть раскладывает на элементы закон внешнего мира. Представление, конечно, рефлектирует себя через постсовременный класс эквивалентности. Общество трансформирует напряженный принцип восприятия. Преамбула представляет объект деятельности. Согласно предыдущему, мир категорически творит конфликт. Согласно мнению известных философов интеллект может быть получен из опыта. Представляется логичным, что боль подчеркивает структурализм, отрицая очевидное. Частное означает типичный закон внешнего мира, условно.</p>
 <p>Объект деятельности индуктивно рефлектирует себя через класс эквивалентности, учитывая известные обстоятельства. Сомнение, в рамках сегодняшних воззрений, решительно индуцирует конфликт. Реальная власть иллюзорна. Постмодернизм философски творит принцип восприятия. Отсюда естественно следует, что мир нетривиален. Структурализм ментально заполняет трансцендентальный объект деятельности, исходя из принятого мнения. Отношение к современности принимает во внимание паллиативный закон внешнего мира.</p>
 </div>
 </div>
 <div id="footer"><!-- --></div>
</div>

</body>
</html>

З.Ы.: Код валиден!

Sign In

Проблемы с табличной версткой в WinIE

Question

Link to comment

Share on other sites

19 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

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