при относительном позиционирование в ie6 появляються пустые места

duffny · November 29, 2007

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

Dimitry Wolotko · November 29, 2007

Без кода сложно.

duffny · November 29, 2007

<div class="mainBanner">
 <img src="img/banner.jpg" border="0" alt="" width="748" height="164";/> 
 <div class="secondBanner">
 <img src="img/banner1.jpg" border="0" alt="" width="251" height="121"/> 
 </div>
</div>

 и стиль:
.mainBanner {
 width: 100%;
 height: 164px;
 min-width: 748px;
 background: url(img/fonBanner.jpg) repeat-x;
}
.secondBanner {
 position: relative;
 top: -144px;
 left: 62%;
 width: 251px;
 height: 121px;
}

maddogrts · November 29, 2007

не верю ))), если используется relative то пустое место долно оставаться во всех браузерах

используй абсолуте , в чем проблема?

Dimitry Wolotko · November 29, 2007

duffny, тег code на форуме придумали не просто так - нам?к понятен?

duffny · November 29, 2007

ну и не верь, а по факту так и есть, мне нужно использовать относительное позиционирование, не все же используют жесткую верстку

maddogrts · November 29, 2007

duffny не понимаю вашего замечания )), вы же не правы ,

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

Какие факты )), я абсолютно уверен в сових словах, а вы раз спорите ), не очень видимо разбираетесь в этом вопросе

duffny · November 29, 2007

я не спорю и не утверждаю, что я хорошо разбираюсь, но position:

absolute: Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

а мне нужно

relative: Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.

мне нельзя задавать position: absolute;

И раз нету способов очищать пространство для ie6 , я просто нижние блоки подняла на высоту получающегося отступа

maddogrts · November 29, 2007

relative: Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.

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

maddogrts · November 29, 2007

duffny

Ну что такое ? куда пропали то ?

duffny · November 29, 2007

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

maddogrts · November 29, 2007

<!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>
 <style type="text/css">
.mainBanner {
 width: 100%;
 height: 164px;
 min-width: 748px;
 background: url(img/fonBanner.jpg) repeat-x;
}
.secondBanner {
 position: absolute;
 top: 20px;
 left: 800px;
 width: 251px;
 height: 121px;
}
 </style>
 </head>
 <body>
<div class="mainBanner">
 <img src="im.jpg" border="0" alt="" width="748" height="164";/> 
 <div class="secondBanner">
 <img src="im.jpg" border="0" alt="" width="251" height="121"/> 
 </div>
</div>
<p>fdfsdfsd</p>
</body>
</html>

почему нельзя использовать абсолютное ?

вырезать нельзя (( увы

nvgudz · November 30, 2007

Тут внесены небольшие изменения. Если вопрос еще актуален, предлагаю:

<!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>
 <style type="text/css">
html,body{margin: 0;padding: 0;}<!-- для наглядности -->
.mainBanner { width: 100%; height: 164px;min-width: 748px;  background: url(img/fonBanner.jpg) repeat-x;}
* HTML{width: expression(this.scrollWidth < 748? "748px" : "auto" );} <!-- IE5, IE5.5 - по желанию -->
.secondBanner {position: relative;left: 63%;margin-top: -144px;width: 251px;}
.secondBanner img{position: absolute;}
		</style>
	</head>
	<body>
<div class="mainBanner">
   <img src="im.jpg" border="0" alt="" width="748" height="164"/><div class="secondBanner">
					 <img src="src="im.jpg" border="0" alt="" width="251" height="121"/></div>
</div>
<p>fdfsdfsd</p>
</body>
</html>

И еще небольшие дополнение, чтобы не было "полосы" (отступа) внизу после рисунков (ИЕ в основном) их необходимо закрывать как в первом примере:

 ...  <img src="im.jpg" border="0" alt="" width="748" height="164"/><div class="secondBanner">
					 <img src="src="im.jpg" border="0" alt="" width="251" height="121"/></div>......

или так

 ...  <img src="im.jpg" border="0" alt="" width="748" height="164"/><br/>
		  <div class="secondBanner">
					 <img src="src="im.jpg" border="0" alt="" width="251" height="121"/></br>
		  </div>......

Sign In

при относительном позиционирование в ie6 появляються пустые места

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information