td height IE

yadfewm · August 31, 2009

Не получается сделать высоту первой ячейки ни через атрибут, ни через стиль IE не слушает. Все вроде правильно отверстано! Где косяк?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>-=title=-</title>
<style type="text/css">
<!--
* {
 margin: 0;
 padding: 0;
 border: 0;
}

html, body {
 height: 100%;
}

body {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#191919;
}
-->
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="height:100%;">
  <tr>
	<td width="25%" bgcolor="#FF0000" height="160">1</td>
	<td width="50%">2</td>
	<td>3</td>
  </tr>
  <tr>
	<td>4</td>
	<td>5</td>
	<td>6</td>
  </tr>
  <tr>
	<td height="60">7</td>
	<td height="60">8</td>
	<td height="60">9</td>
  </tr>
</table>

yadfewm · September 1, 2009

Да, абсолютно со всеми согласен, нет слов, IE 7 никогода в жизни с таблицами и с DOCTYPE работать не будет, легче смириться. Неужели любой табличный сайт с доктайпом слетает в IE???? Или таких сайтов просто нет - чтоб и с табличной версткой и с доком?

Буду верстать блоками, прийдется работодателю долго объяснять почему высота бортика у левой ячейки не растягивается на всю высоту, потому что это блок, мать его, и его высоту формирует контент!

Great Rash · September 1, 2009

Не вижу проблемы:

<!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="en" lang="en">
<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		table {
			width: 100%;
			height: 100%;
		}

		td {
			width: 33%;
		}

		.red {
			background: red;
		}

		.green {
			background: green;
		}

		.yellow {
			background: yellow;
		}

		.h {
			height: 60px;
		}
	</style>
</head>
<body>

	<table>
		<tr>
			<td class="h">

			</td>
			<td class="h">

			</td>
			<td class="h">

			</td>
		</tr>
		<tr>
			<td class="red">
				Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies. 
				Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies. 
				Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies. 
				Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies. 
				Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies. 
			</td>
			<td class="green">
				222
			</td>
			<td class="yellow">
				333
			</td>
		</tr>
		<tr>
			<td class="h">

			</td>
			<td class="h">

			</td>
			<td class="h">

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

</body>
</html>

Edited September 1, 2009 by Great Rash

VJiK · September 1, 2009

Great Rash, проблема в ИЕ6 и ИЕ7.

Посмотрите свою страничку в одном из этих "браузеров" - всё поймёте =)

Great Rash · September 1, 2009

Смотрю в ИЕ7. Что я должен понять?

VJiK · September 1, 2009

Вместо

Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies.
Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies.
Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies.
Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies.
Pellentesque tellus risus, mattis id pulvinar sit amet, tempor et urna. Maecenas orci neque, tempus non cursus a, pellentesque eget augue. Aenean mi purus, consectetur eu scelerisque ac, fringilla et erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel urna eget ligula blandit tempor. Nunc porttitor nulla quis elit bibendum adipiscing. Vestibulum vel diam nec lorem euismod posuere. Nunc pellentesque, magna eu gravida vehicula, augue nulla venenatis massa, quis mattis tortor tellus quis nibh. Quisque accumsan adipiscing suscipit. Fusce pellentesque accumsan turpis, a mollis felis egestas sed. Aliquam erat volutpat. Sed at sollicitudin nisi. Cras nec nisl leo. Proin euismod suscipit ultricies.

напишите 111

Great Rash · September 1, 2009

Ну и что, естественно таблица сожмется. Все зависит от контента внутри ячейки. В таком случае можно сделать min-height: 100%; (или 90%, на глаз короче) для средних ячеек.

VJiK · September 1, 2009

в этом и проблема

нужно чтобы верхняя и нижняя ячейки были фиксированной высоты, а средняя тянулась на оставшееся место. Как это сделать в ИЕ6 и ИЕ7? Вот в чем вопрос.

Great Rash · September 1, 2009

Лады, тогда экспрешн:

<!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="en" lang="en">
<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
		}

		table {
			width: 100%;
			height: 100%;
			border-collapse: collapse;
		}

		td {
			width: 33%;
		}

		.red {
			background: red;
			height: expression(this.offsetParent.offsetParent.offsetHeight - 120);
		}

		.green {
			background: green;
		}

		.yellow {
			background: yellow;
		}

		.h {
			height: 60px;
		}
	</style>
</head>
<body>

	<table>
		<tr>
			<td class="h">

			</td>
			<td class="h">

			</td>
			<td class="h">

			</td>
		</tr>
		<tr>
			<td class="red">
				111
			</td>
			<td class="green">
				222
			</td>
			<td class="yellow">
				333
			</td>
		</tr>
		<tr>
			<td class="h">

			</td>
			<td class="h">

			</td>
			<td class="h">

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

</body>
</html>

VJiK · September 1, 2009

Да, с экспрешеном - возможно

Вероятно без него в данном случае - никак.

Sign In

td height IE

Question

yadfewm

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

yadfewm

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

VJiK

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

VJiK

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

VJiK

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

VJiK

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information