отступы для блока в IE6

Kat · June 20, 2007

Нужно просто поместить прямоугольник на страницу, но не на всю высоту, а чтобы сверху и снизу были фиксированные отступы, скажем по 100px.

Рисуем div и делает для него

#list{

background-color:#FFFFFF;

position:absolute;

width:80%;

top:100px;

bottom:100px;

}

Так вот, в Opera и Mozilla все нормально отрабатывает, а в IE6 высота блока сжимается.

Прочитала, что можео задавать для IE так:

height:expression(document.body.offsetHeight-200);

Да, вроде отрабатывает, но я боюсь это использовать, потому что JavaScript может быть отключен и тогда весь дизайн полетит...Я права? Помогите, please, верстаю слоями первый раз и не знаю, как это правильно делается...

Fu-tai · June 20, 2007

Во первых, Див и так не будет на всю высоту, поскольку он выщитывает высоту, от высоты контента и margin, padding, border;

ИЕ считает это растояние по своему и если эти параметры не нужны то лучше их обнулять!

Ну а во вторых, если нужно чтобы от прямоугольника были отступы, то нада вместо position: absolute; bottom и top использовать

margin: 100px 0;

То что вы написали распологает блок по оси координат, а не делает отступы от блока!

Kat · June 21, 2007

Ну а во вторых, если нужно чтобы от прямоугольника были отступы, то нада вместо position: absolute; bottom и top использовать

margin: 100px 0;

Не получается так в IE6. Попробовала- снова все стягивается п оразмеру контента. Вот весь код:

<html>
<head>
<style type="text/css"> 
<!-- 
html, body {
background-color:#003399;
  margin:0;
  padding:0;
  width:100%;
  height:100%;

}
#list{
  background-color:#FFFFFF;
  position:absolute; 
  top:100px;
  bottom:100px;
  margin: 100px 0;

}
</style>
<head>
  <body>	
			<div id="list">
				content
	</div>   
  </body>
</html>

(именно в IE6 не получается, остальные браузеры (Opera..) вроде делают высоту.

Vlad · June 21, 2007

DOCTYPE добавь.

Kat · June 21, 2007

не помогает.

если задать высоту - все ок, но я не знаю какая высота будет, даже в 100% - это зависит от разрешения экрана.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css"> 
<!-- 
html, body {
background-color:#003399;
  margin:0;
  padding:0;
  width:100%;
  height:100%;

}
#list{
  background-color:#FFFFFF;
  position:absolute; 
  margin: 100px 0;  
}
</style>
<head>
  <body>	
	<div id="list">
				content
	</div>   
  </body>
</html>

надо именно что отступы определенные снизу и сверху, потому что там фиксированные картинки, которые должны к границам экрана и к этому слою прилегать.

Admin · June 21, 2007

попробуй убрать у хтмл и бади ширину и высоту. И укажи margin-bottom:100px; margin-top 100px;

и ещ?

div {margin:0px;} это после бади

Kat · June 21, 2007

не помогает, то же самое (

а у вас ie6 нет?

ARA · June 21, 2007

Kat

Если я правильно тебя понял, то ты хочешь получить это!

вот проверял (на IE6, Opera 9.02. Mozilla FireFox 2.0.0.1) под разный разрешения, блок всегда находится по центру!

Все придельно просто!

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

<html>
<head>
	<title>Untitled</title>
	<style type="text/css"> 
	<!-- 
	html, body {
	margin: 0px;
	padding: 0px;
	border: none;
	background: #fff;}

	#list {
	width: 40%;
	height: 150px;
	margin: auto;
	padding: auto;
	border: solid 2px #ff9;
	background: #ff9;
	position: absolute;
	top: 150px;
	left: 30%;}

	--></style>
</head>

<body>

	<div id="list">
				content
	</div>  


</body>
</html>

Я так понимаю ты будешь знать заранее размеры блока? Поэтому я задал высоту в пикселях, а ширину в процентак, так как нужно держать блок посеридине, я просто задал леый отступ равный половине, от отсавшегося свободного пространства!

А теперь посмотри на этот код) понимаешь в чем фишка!

Здесь высота задана в процентах(у воженого блока)!

Просто наработай его под себя!

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

<html>
<head>
	<title>Untitled</title>
	<style type="text/css"> 
	<!-- 
	html, body {
	margin: 0px;
	padding: 0px;
	border: none;
	background: #fff;}

	#list {
	width: 40%;
	height: 300px;
	margin: auto;
	padding: auto;
	border: solid 2px #ff9;
	background: #ff9;
	position: absolute;
	top: 150px;
	left: 30%;}

	#content {
	width: 100%;
	height: 70%;
	margin: auto;
	padding: auto;
	border: none;
	background: red;}

	--></style>
</head>

<body>

	<div id="list">
			<div id="content">content</div>
	</div>  
</body>
</html>

P. S. Если я тебя правильно то все верно! Если нет, поясни лучше!

Kat · June 21, 2007

В том то и дело, что высоту блока я не знаю!!!

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

Если задать высоту, то и у меня все работает. Но я знаю только расстояние снизу и сверху.

yopopt · June 21, 2007

Тогда можно сделать как-то так:

#list{
  background-color:#FFFFFF;
  position:absolute;
  top:100px;
  bottom:100px;
  height:expression(body.offsetHeight-200 + 'px');
}

Kat · June 21, 2007

height:expression(body.offsetHeight-200 + 'px'); - Это вычисляется с использованием JavaScript? А если JavaScript в браузере отключен? Это не опасно к употреблению?

ARA · June 21, 2007

Ну если она будет в виксрованом состояние, то тебе нужно смотреть первый пример!

Если же в процентах то второй!

А задавать отступ снизу ты замучаешся!!! Тебе нужно будет скрипт, который будет определять разрешения у клиентской стороны, и задвать высоту блохо из ходя от этого! А если ЯВА будет отключено, то все полетит к чертям, так что тебе нужен вторй пример!

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

Вроде все правильно пояснил

А лучше увидеть картинку, которая будет отрожать происходящего, я поумаю как можно ихловчится!

Fu-tai · June 21, 2007

да уж! рисунок в студию!

А то есть подозрение что мы не допонимаем что вам нужно?

Kat · June 21, 2007

Вот макет страницы (условный):

- вот тот самый блок, как видите расстояние снизу фиксированно (сверху тоже).

X,Y - задано в пикселях

Высота всей страницы должна точно вписываться в высоту браузера.

Fu-tai · June 21, 2007

:/ Дело не в расстоянии! У вас подход к верстке этого макета Дивами совершенно не правильный!

Kat · June 21, 2007

отлично!

а как тогда правильно, то есть какой подход выбрать?

с интересом выслушаю (на самом деле!)

Есть еще табличный вариант

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;

}
#list{
background-color:#0033CC;
position:relative;
width:100%;
height:100%;
}

</style>
</head>

<body><table width="100%" height="100%" border="1">
  <tr height="50px">
	<td  > </td>
	<td width="80%"> </td>
	<td> </td>
  </tr>
  <tr>
	<td> </td>
	<td>
	  <div id="list"> content</list>
	 </td>
	<td> </td>
  </tr>
  <tr height="50px">
	<td> </td>
	<td>  </td>
	<td> </td>
  </tr>
</table>

</body>
</html>

Но тут проблема в том, что внутренний див опять же в IE6 на всю среднюю ячейку таблицы не растягиватся. И высота строк таблицы неверно устанавливается (в IE6)

Maslakoff · June 21, 2007

Kat, влупи таблицу и не парься...... рррррррррррррр((((

Tokolist · June 21, 2007

2 Kat

http://www.cssplay.co.uk/layouts/fixit.html

без экспрешинов

или смотри мой пример

<html>
<head>
<style type="text/css">
body {
  margin: 0;
  border: 0;
  padding: 0;
  height: 100%; 
  max-height: 100%;
  background-color: red;
  overflow: hidden;
}

* html body {
  padding: 10px 0 0 0; 
}

#content {
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-color: white;
}

* html #content {
  height: 100%; 
  width: 100%; 
}

</style>
</head>

<body>

<div id="content">
content
</div>
</body>
</html>

ARA · June 22, 2007

Tokolist, что-то не пашет твой пример , под какой доктайп он заточен?

Evgeny · June 22, 2007

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<title>Проблема века</title>
  </head>

  <body>
 <table cellspacing=0 cellpadding=5 width="90%" height="100%" border=1>
   <tr height=100>
	 <td></td><td>X = 100 (голова)</td><td></td>
   </tr>
	  <tr>
	 <td></td><td>Внутренности: кишки, почки, печень, сердце, л?гкие.</td><td></td>
   </tr>
	  <tr height=100>
	 <td></td><td>Y = 100 (ноги)</td><td></td>
   </tr>
 </table>
  </body>
</html>

А так нравиццо ?

Tokolist · June 22, 2007

Tokolist, что-то не пашет твой пример , под какой доктайп он заточен?

он заточен под квиркс моде

пример не соответствует точно ТЗ. просто мне лень перерабатывать...

главное понять принцип, который отображен по ссылке и в примере.

А так нравиццо ?

ха. таблицами и девятиклассник сможет

diavol.org · June 23, 2007

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

Kat · June 23, 2007

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

да вроде можно верх и низ тоже в пикселах задать, а среднюю tr как 100%. вроед работает, правда не знаю, во всех ли браузерах

Evgeny · June 25, 2007

ха. таблицами и девятиклассник сможет

Однако указанные выше примеры не работали ...

Tokolist · June 25, 2007

ха. таблицами и девятиклассник сможет
Однако указанные выше примеры не работали ...

пример не соответствует точно ТЗ. просто мне лень перерабатывать...
главное понять принцип, который отображен по ссылке и в примере.

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

но это, в принципе, не важно. короче, у тебя нормальный пример. точка.

Sign In

отступы для блока в IE6

Question

Link to comment

Share on other sites

24 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

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