3 картинки, 1 размножается

regtefas · September 9, 2008

Собственно говоря есть 3 картинки, одна должна быть сверху, с фиксированной высотой, посередине размножается, снизу фиксированная

Делаю это так:

<td class="centerline" width="51" valign="top"><div class="up"> </div><div class="bottom"> </div></td>

Ну и css

td.centerline {
	background: url('{WEBPATH}/template/images/line_vert_2.gif') center repeat-y;
	z-index: 1;
	height: 100%;
}
td.centerline div.up {
	height: 50%;
	background: url('{WEBPATH}/template/images/line_vert_1.gif') top center no-repeat;
	z-index: 2;
	border: 1px solid red;
}
td.centerline div.bottom {
	height: 50%;
	background: url('{WEBPATH}/template/images/line_vert_3.gif') bottom center no-repeat;
	z-index: 2;
	border: 1px solid red;
}

В фф всё нормально, в ие конечно же нет, баг известный.

Тогда я пытался сделать div.bottom всегда снизу:

td.centerline div.bottom {
	height: 140px;
	position-absolute: relative;
	top: 100%; || bottom: 0;
...
}

Ещё попробовал вот такой забавный вариант:

td.centerline div.bottom {
	padding-top: 100%-140px;
	margin-top: 100%-140px;
	height: 140px;
...
}

Собственно говоря первый вариант работает, но только если отключить, что делать он не хотелось бы (стоит

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

)

Есть ли на данный момент нормальное решение этой проблемы? А то очень не хочется дописывать на js или убирать DOCTYPE.

Заранее спс.

Pavel_html · September 9, 2008

картинка в пробирке))) вот решение))

regtefas · September 9, 2008

картинка в пробирке))) вот решение))

Не совсем понял идею :rolleyes:

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

<!--[if IE]>
<style type="text/css">
 td.centerline {
		position: relative;
	}
	td.centerline div.up {
		height: 140px;
	}
  td.centerline div.bottom {
		height: 140px;
		width: 15px;
		position: absolute; bottom:0; left: 15px;
	}
</style>
<![endif]-->

Однако обнаружил, что всё-равно не работает в опере, ох уж эти браузеры

Edited September 9, 2008 by regtefas

Sign In

3 картинки, 1 размножается

Question

regtefas

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Pavel_html

Link to comment

Share on other sites

regtefas

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information