Пропадает бордер у дива при прокрутке.

Flake · October 6, 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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>hi</title>

	<style type="text/css">	
		.box {
			margin-bottom: 24px;
		}
		.box .top {
			position: relative;
			border: 0px solid;
			z-index: 2;
		}
		.box .top img.corner {
			vertical-align: -15px;
		}
		.box .top img.ico {
			margin-left: -55px;
			margin-top: 12px;
		}
		.box .top .title {
			margin-top: -56px;
			margin-left: 86px;
		}
		.box .content {
			position: relative;
			z-index: 1;
			border: 1px solid #b0b0b0;
			padding: 24px 12px 12px 12px;
			margin-top: -17px;
			margin-left: 18px;
		}
		.box .adv {
			position: relative;
			z-index: 1;
			border: 1px solid #b0b0b0;
			padding: 12px;;
		}
		.box .content h3 {
			font-size: 13px;
			font-weight: normal;
			margin: 0 0 6px 0;
		}
	</style>
</head>

<body>

<div class="box">
	<div class="top">
		<img alt="" class="corner" src="/img/box_corner.gif" /><img alt="" class="ico" src="/img/newspaper_ico.gif" />
		<div class="title"><img alt="" src="/img/newsevents_txt.gif" /></div>
	</div>
	<div class="content">
		hello<br/>hello<br/>hello<br/>hello<br/>
		hello<br/>hello<br/>hello<br/>hello<br/>
	</div>
</div>

<div class="box">
	<div class="top">
		<img alt="" class="corner" src="/img/box_corner.gif" /><img alt="" class="ico" src="/img/newspaper_ico.gif" />
		<div class="title"><img alt="" src="/img/newsevents_txt.gif" /></div>
	</div>
	<div class="content">
		hello<br/>hello<br/>hello<br/>hello<br/>
		hello<br/>hello<br/>hello<br/>hello<br/>
	</div>
</div>

<div class="box">
	<div class="top">
		<img alt="" class="corner" src="/img/box_corner.gif" /><img alt="" class="ico" src="/img/newspaper_ico.gif" />
		<div class="title"><img alt="" src="/img/newsevents_txt.gif" /></div>
	</div>
	<div class="content">
		hello<br/>hello<br/>hello<br/>hello<br/>
		hello<br/>hello<br/>hello<br/>hello<br/>
	</div>
</div>

<div class="box">
	<div class="top">
		<img alt="" class="corner" src="/img/box_corner.gif" /><img alt="" class="ico" src="/img/newspaper_ico.gif" />
		<div class="title"><img alt="" src="/img/newsevents_txt.gif" /></div>
	</div>
	<div class="content">
		hello<br/>hello<br/>hello<br/>hello<br/>
		hello<br/>hello<br/>hello<br/>hello<br/>
	</div>
</div>

<div class="box">
	<div class="top">
		<img alt="" class="corner" src="/img/box_corner.gif" /><img alt="" class="ico" src="/img/newspaper_ico.gif" />
		<div class="title"><img alt="" src="/img/newsevents_txt.gif" /></div>
	</div>
	<div class="content">
		hello<br/>hello<br/>hello<br/>hello<br/>
		hello<br/>hello<br/>hello<br/>hello<br/>
	</div>
</div>

<div class="box">
	<div class="top">
		<img alt="" class="corner" src="/img/box_corner.gif" /><img alt="" class="ico" src="/img/newspaper_ico.gif" />
		<div class="title"><img alt="" src="/img/newsevents_txt.gif" /></div>
	</div>
	<div class="content">
		hello<br/>hello<br/>hello<br/>hello<br/>
		hello<br/>hello<br/>hello<br/>hello<br/>
	</div>
</div>

<div class="box">
	<div class="top">
		<img alt="" class="corner" src="/img/box_corner.gif" /><img alt="" class="ico" src="/img/newspaper_ico.gif" />
		<div class="title"><img alt="" src="/img/newsevents_txt.gif" /></div>
	</div>
	<div class="content">
		hello<br/>hello<br/>hello<br/>hello<br/>
		hello<br/>hello<br/>hello<br/>hello<br/>
	</div>
</div>

</body>

</html>

Именно в эксплорер (6,7) при прокрутки пропадает верхний бордер. Объясните пожалуйста из-за чего это происходит.

Edited October 6, 2009 by s0rr0w

s0rr0w · October 6, 2009

всем блокам с position: relative добавьте zoom: 1

Flake · October 6, 2009

всем блокам с position: relative добавьте zoom: 1

После того как назначил всем, всё съехало. Потом назначил только .content и перестало пропадать. Спасибо.

Justnewone · October 7, 2009

После того как назначил всем, всё съехало. Потом назначил только .content и перестало пропадать. Спасибо.

Не используйте релейтив там где не надо. Только чтобы спозиционировать (зачастую помогает отриц. маргин, то есть почти всегда), чтобы указать родителя абсолютного блока, чтобы расположить один элемент поверх другого (в связке с z-index). Во всем остальном смысла нет никакого! Только грабли на будущее с IE 6 и 7, а иногда даже Opera, по крайней мере девятка. Кроме того, это еще и замедляет процесс парсинга страницы.

Sign In

Пропадает бордер у дива при прокрутке.

Question

Flake

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Flake

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information