Таблица, как включить авторазмер ячеек в IE FF

roleg · July 8, 2010

Начал писать легкий шаблончик для сайта, последний раз занимался этим 6 лет назад

И тут пошли проблемы, сначала сделал на дивах потом решил что слишком много кода получилось и переписал на 1 таблицу

Проверил в Опере все замечательно

А вот в IE и FF ячейки не сжались до контента

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

помогите, знаю что решение простое, может хак какой или CSS свойство нужно поставить

шаблон тут: http://arxive.arvixe.ru/index2.html

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Танрен - Херсонский клуб боевых искусств</title>
<link href="css/template2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<table cellpadding="0" cellspacing="0">
<tr>
	<td colspan="3"><img src="img/logo.jpg"></td>
</tr>
<tr>
	<td><img src="img/left_b1.jpg"></td> <td bgcolor="#FFFFFF"></td> <td><img src="img/right_b1.jpg"></td>
</tr>
<tr valign="top">
	<td><img src="img/left_b2.png"></td> <td width="492" rowspan="4" bgcolor="#FFFFFF"><br>xxx<br>xxx<br><br><br><br>xxx<br>xxx<br>xxx<br><br><br><br>xxx<br>xxx<br>xxx<br><br><br><br>xxx<br>xxx<br>xxx<br><br><br><br>xxx<br>xxx<br>xxx<br><br><br><br>xxx</td> <td><img src="img/right_b2.png"></td>
</tr>
<tr>
	<td class="l_b3"></td> <td class="r_b3">text<br>text<br>text</td>
</tr>
<tr valign="top">
	<td><img src="img/left_b4.png"></td> <td><img src="img/right_b4.png"></td>
</tr>
<tr>
	<td class="l_back"></td> <td class="r_back"></td>
</tr>
<tr>
	<td colspan="3"><img src="img/footer.png"></td>
</tr>
</table>
</center>
</body>
</html>

CSS

body {
	padding: 0;
	margin: 0;
	background-attachment: fixed;
	background-image: url(../img/back.jpg);
	background-position: bottom;
	background-repeat: repeat-x;
}
img {
	padding: 0;
	margin: 0;
}
table {
	padding: 0;
	margin: 0;
	border: 0;
	border-collapse:collapse;
}
.l_b3 {
	background-image: url(../img/left_b3.png);
	background-repeat: repeat-y;
}
.r_b3 {
	background-image: url(../img/right_b3.png);
	background-repeat: repeat-y;
}
.l_back {
	background-image: url(../img/left_back.png);
	background-repeat: repeat-y;
}
.r_back {
	background-image: url(../img/right_back.png);
	background-repeat: repeat-y;
}

Edited July 8, 2010 by roleg

psywalker · July 8, 2010

А ты возьми на <td width="492" bgcolor="#ffffff" rowspan="4"> повесь полоску фона, середины и чтоб тянулась по оси y. И так же сделай с боковыми колонками, где боковые меню растягиваться должны.

roleg · July 8, 2010

А ты возьми на <td width="492" bgcolor="#ffffff" rowspan="4"> повесь полоску фона, середины и чтоб тянулась по оси y. И так же сделай с боковыми колонками, где боковые меню растягиваться должны.

не совсем понял, какую полоску фона?

мне нужно чтобы там было #FFFFFF

боковые колонки там где должны растянутся, как только TD примут размер IMG внутри

Edited July 8, 2010 by roleg

psywalker · July 8, 2010

мне нужно чтобы там было #FFFFFF

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

roleg · July 8, 2010

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

сделал все что ты написал, нечего не изменилось, только фон на папирусе поменялся

psywalker · July 8, 2010

Если сделал, тогда почему разрыв до сих пор в середине?

roleg · July 8, 2010

Если сделал, тогда почему разрыв до сих пор в середине?

не знаю, может я тебя не так понял

Edited July 8, 2010 by roleg

psywalker · July 8, 2010

не знаю, может я тебя не понял

Ну смотри, я просто хочу, чтобы ты в середине хотябы повесил на тянущуюся хрень фон, который представляет из себя полоску, которая и будет фоном для середины. Допустим 1000пк(или сколько там у тебя) и чтобы она тянулась сверху вниз, чтобы не было разрыва

s0rr0w · July 8, 2010

Для начала из доктайпа нужно убрать слово Transitional

roleg · July 8, 2010

Для начала из доктайпа нужно убрать слово Transitional

установил строгий доктайп http://arxive.arvixe.ru/index2.html

теперь ровы не сходятся

s0rr0w · July 8, 2010

установил строгий доктайп http://arxive.arvixe.ru/index2.html
теперь ровы не сходятся

Потму что http://forum.htmlbook.ru/index.php?showtopic=13589

roleg · July 8, 2010

Потму что http://forum.htmlbook.ru/index.php?showtopic=13589

о да, вернули

а что по делу подскажешь?

s0rr0w · July 8, 2010

о да, вернули
а что по делу подскажешь?

Читать по ссылке не пробовал? И головой думать, своей причем.

roleg · July 8, 2010

Читать по ссылке не пробовал? И головой думать, своей причем.

прошел по ссылке, почитал, подумал, перепробовал все способы, голяк

psywalker · July 8, 2010

прошел по ссылке, почитал, подумал, перепробовал все способы, голяк

Почему галяк? Ведь верхний отступ хотябы исчез, разве нет?

roleg · July 8, 2010

Почему галяк? Ведь верхний отступ хотябы исчез, разве нет?

один плюс

неужели нету способа назначить ячейке таблицы HEIGHT ?

s0rr0w · July 8, 2010

прошел по ссылке, почитал, подумал, перепробовал все способы, голяк

Ах, ты про разрыв. Ну так зачем тебе отдельная ячейка для каждой картинки? Засунь в одну ячейку две картинки, и не мучайся

roleg · July 8, 2010

Ах, ты про разрыв. Ну так зачем тебе отдельная ячейка для каждой картинки? Засунь в одну ячейку две картинки, и не мучайся

там все так как было задумано, разрыв да, как HEIGHT ячейки таблицы в IE и FF подогнать под размеры картинки?

s0rr0w · July 8, 2010

там все так как было задумано, разрыв да, как HEIGHT ячейки таблицы в IE и FF подогнать под размеры картинки?

TD указать высоту картинки

roleg · July 8, 2010

TD указать высоту картинки

указал во всех тэгах TD размеры (где их явно знаю)

<!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>
<link href="css/template2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<table id="table" cellpadding="0" cellspacing="0" width="1000">
<tr>
	<td colspan="3" width="1000" height="196"><img src="img/logo.jpg"></td>
</tr>
<tr>
	<td height="77"><img src="img/left_b1.jpg"></td> <td bgcolor="#FFFFFF" height="77"></td> <td height="77"><img src="img/right_b1.jpg"></td>
</tr>
<tr valign="top">
	<td height="62"><img src="img/left_b2.png"></td> <td width="492" rowspan="4" bgcolor="#FFFFFF"><br>xxx<br>xxx<br><br><br><br>xxx<br>xxx<br>xxx<br><br><br><br>xxx<br>xxx<br>xxx<br><br><br><br>xxx<br>xxx<br>xxx<br><br><br><br>xxx<br>xxx<br>xxx<br><br><br><br>xxx</td> <td height="62"><img src="img/right_b2.png"></td>
</tr>
<tr>
	<td class="l_b3"></td> <td class="r_b3">text<br>text<br>text</td>
</tr>
<tr valign="top">
	<td height="53"><img src="img/left_b4.png"></td> <td height="53"><img src="img/right_b4.png"></td>
</tr>
<tr>
	<td class="l_back"></td> <td class="r_back"></td>
</tr>
<tr>
	<td colspan="3" height="46"><img src="img/footer.png"></td>
</tr>
</table>
</center>
</body>
</html>

в FF есть изменения

сильно растянулись блоки с фоном по бокам, хотелось бы чтобы это было как в Опере по размеру контента =/

в IE без изменений (

Edited July 8, 2010 by roleg

roleg · July 9, 2010

не знаю, можно ли апать

Great Rash · July 9, 2010

Так?

<!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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

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

		html,
		body {
			font-family: "Trebuchet MS", Veradna, Tahoma, Arial, sans-serif;
			font-size: 11px;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			border-spacing: 0;
			border: 0;
		}

		td {
			vertical-align: top;
			border: 1px solid;
		}

		td.side {
			background: red;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<table cellspacing="0">
		<tbody>
			<tr>
				<td>
					<table cellspacing="0">
						<tbody>
							<tr>
								<td class="side">
									small text
								</td>
							</tr>
						</tbody>
					</table>
				</td>
				<td>		
					mega big text <br />mega big text <br />mega big text <br />
					mega big text <br />mega big text <br />mega big text <br />
					mega big text <br />mega big text <br />mega big text <br />
					mega big text <br />mega big text <br />mega big text <br />
					mega big text <br />mega big text <br />mega big text <br />
				</td>
				<td>
					<table cellspacing="0">
						<tbody>
							<tr>
								<td class="side">
									small text
								</td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

Sign In

Таблица, как включить авторазмер ячеек в IE FF

Question

Link to comment

Share on other sites

21 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

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information