Помогите с версткой. Вопросы

[Nicca]

Хочу сделать блок с информацией. В ИЕ6 выводится вроде нормально, а в опере, мФ все наперекосяк.

Подскажите как избавиться с этой проблемой. Как видят отступы браузеры?

Спсибо

<style>
*.br2 {

	font-size: 1px;
	height: 1px
}
.r_1 {
	background-color: #ddd;
	margin: 0 2px;
	height: 1px
}
.r_2 {
	background-color: #fff;
	margin: 0 1px;
	height: 1px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd
}
.r_3 {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
</style>
<div style="height:70px; width:700px;">
				<div class="r_1"><img src="images/spacer.gif" width="1" height="1" alt="" /></div>
				<div class="r_2"><img src="images/spacer.gif" width="1" height="1" alt="" /></div>
				<div class="r_3">
					<div style="background-color: #fefefe; border-left: 2px solid #fff;	border-right: 2px solid #fff">
						<img src="images/spacer.gif" width="1" height="1" alt="" />
					</div>
					<div style="background-image: url('C:Documents and SettingsyuraРабочий столoldimagesgradient_gray.gif'); background-repeat:repeat-x; border-left: 1px solid #fff; border-right: 1px solid #fff; height:65px;">
						<div style="margin:2px 0 0 10px;">
							<form method="get" name="sform">			
							<div class="br2"></div>
							<div>
								<input type="text" name="zapros" class="search" />
								<input type="image" name="submit" class="searchsubmit" src="images/search.gif" />
							</div>
							</form>
						</div>						
					</div>
				</div>
				<div class="r_3">
					<div style="background-color: #e1e8ee; border-left: 1px solid #fff;	border-right: 1px solid #fff">
						<img src="images/spacer.gif" width="1" height="1" alt="" />
					</div>
				</div>
				<div class="r_2"><img src="images/spacer.gif" width="1" height="1" alt="" /></div>
				<div class="r_1"><img src="images/spacer.gif" width="1" height="1" alt="" /></div>
			</div>

[walaby]

В коде ничего не понял, тк там информации практически нет - и не понять что к чему..

Как видят отступы браузеры:

padding - внутренний отступ для какого-либо текста, картинки и другой инфы внутри блока или слоя, т.е он формирует отступы ВНУТРИ

margin - внешний отступ для слоев, в которых заключена информация

[Dimitry Wolotko]

В проблемы с версткой.

А вопрос, по возможности, локализуйте.

[Kiar25]

Самое главное:

1. width - задает ширину конетекста, а не ширину всего блока

2. padding & border прибавляются к width из этого складывается полностью видимая ширина блока

Например:

#block {width: 100px; padding: 10px; border: 2px;}

Ширина блока будет равна - 100 + 10 + 10 + 2 + 2 = 124px

[Vlad]

http://htmlbook.ru/faq/?a=50