Отступ после DIVa в ie 6 и 7

optimismous · October 10, 2009

Всем привет! Прочитал на Хабре как сделать блок со скругленными краями с помощью буллитов, попытался реализовать и вот что вышло: Пример.

Проблема в том что в 6 и 7 эксплорере между блоками corners и contacts-form появляется отступ в размер оставшейся части буллита, причем проблема исчезает если из кода убрать доктайп или если внутри contacts-form размещен просто текст не огороженный тегами. Подскажите пожалуйста корректное решение этой проблемы.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<div class="contacts box">
<div class="corners">
<em class="tcl"><b>•</b></em>
<em class="tcr"><b>•</b></em>
</div>
<div class="contacts-form">
<form id="myForm" action="#" method="post">
	<div>
		 <label for="name">Имя:</label>
	</div>
	<div>
	<input type="text" name="name" id="name" value="" tabindex="1" />
	</div>
	 <div>
	 <label for="mail">Почта:</label>
	</div>
	<div>
	<input type="text" name="mail" id="mail" value="" tabindex="2" />
	</div>
	<div>
		<label for="textarea">Textarea:</label>
	</div>
	<div>
		<textarea cols="20" rows="8" name="textarea"></textarea>
	</div>

	<div>
		<input type="submit" value="Submit" />
	</div>
</form>
</div>
<div class="corners">
<em class="bcl"><b>•</b></em>
<em class="bcr"><b>•</b></em>
</div>
</div>
<body>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
div.box {
  width: 241px;
}
	div.corners {
	position: relative;
	margin: 0 20px;
	height: 20px;
	background: #363636;
	}
		div.corners em b {
		   position:absolute;
		   font:150px Arial;
		   line-height:40px;
		   font-weight:normal;

		}
		.tcl, .tcr, .bcl, .bcr {
		   z-index:11;
		   width:20px;
		   height:20px;
		   color:#363636;	 
		   overflow:hidden;
		   position:absolute;  
		   background:transparent;
		}
		.tcl {top:0; left:-20px;}
		.bcl {bottom: 0; left:-20px;}
		.tcr {top:0; right:-20px;}
		.bcr {bottom:0; right: -20px;}

		.tcl b {left:-8px;}
		.bcl b {left:-8px; top:-17px;}
		.tcr b {left:-25px;}
		.bcr b {left:-25px; top: -17px;}
		div.contacts-form {
		padding: 0 20px;
		background: #363636;
		color: #FFF;
		}
		#MyForm {
			margin: 0;
			padding: 0;
			border:0;
			height:1%;
		}

WalkMan · October 11, 2009

Ну если не лезть в корень проблемы, то отрицательными маргинами для формы и нижнего дива с булитами, с хаками для ие6-7

*margin-top: -20px;

Searcher · October 12, 2009

а zoom:1 не пробовали?

optimismous · October 12, 2009

а zoom:1 не пробовали?

Пробовал, не помогло.

WalkMan, так и поступлю.

Спасибо за ответы.

Sign In

Отступ после DIVa в ie 6 и 7

Question

optimismous

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

WalkMan

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

optimismous

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information