Странное поведение DIV при убирании BORDER

TonKhaO · April 23, 2009

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

Ниже привожу html и css. На всякий вот прямая ссылка http://shinoda.ru/what_the_fuck/default1.htm Проблема в следующем, в диве с айди header1 когда стоит однопиксельная рамка вокруг блока, ну то есть border: 1px solid "color" - вобчем блок отображается на своем законном месте без каких либо отсутпов, НО если я уберу из #header1 рамку, то чото происходит непонятное, словно у него (header1) появляется верхний марджин. Кто нить сталкивался с подобным??? Скрины в приложении :-)

<!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>
<title>сайт</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

<body>

<div id="nonFooter">

	 <div id="header1">

		 <div id="logo"></div>

		 <div id="menu">

			 <ul id="ul_menu">
			 <li><a class="menu_link" href="#">О заводе</a></li>
			 <li><a class="menu_link" href="#">Производство</a></li>
			 <li><a class="menu_link" href="#">Продукция</a></li>
			 <li><a class="menu_link" href="#">Услуги</a></li>
			 <li><a class="menu_link" href="#">Контактная информация</a></li>
			 </ul>

		 </div>

	 </div>

	 <div id="content">

		 <div id="left">

			 left block

		 </div>




		 <div id="text">

			 content content content content content content content content content
 content content content content content content content content content
 content content content content content content content content content
 content content content content content content content content content
 content content content content content content content content content
 content content content content content content content content content

		 </div>

		 <div class="clear"></div>

	 </div>
</div>

<div id="footer">

	 <div id="footer_left">

		 <div class="footer_small_pics_block">

			 <a href="#"><img src="images/to_home.gif" alt="" /></a>

		 </div>

		 <div class="footer_small_pics_block">

			 <a href="#"><img src="images/to_search.gif" alt="" /></a>

		 </div>

		 <div class="footer_small_pics_block">

			 <a href="#"><img src="images/to_feedback.gif" alt="" /></a>

		 </div>

	 </div>

	 <div id="footer_right">

		 копирайты

	 </div>

</div>

</body>
</html>

* {margin: 0px; padding: 0px;}

html, body {
	  height: 100%;
}


a img {border: none;}

table, tr, td, div, p, ul, ol, li {
								   color: #191919;
								   font: 10px verdana;
}


p {margin-top: 15px; margin-bottom: 15px;}



a:link {color:#1f4298; font: 10px verdana}
a:visited {color:#1f4298; font: 10px verdana}
a:hover {color:#1f4298; font: 10px verdana}
a:active {color:#1f4298; font: 10px verdana}



a.menu_link:link {color:#1f4298; font: 12px verdana;}
a.menu_link:visited {color:#1f4298; font: 12px verdana;}
a.menu_link:hover {color:#1f4298; font: 12px verdana;}
a.menu_link:active {color:#1f4298; font: 12px verdana;}



#nonFooter {
			position: relative;
			min-height: 100%;
			width: 1000px;
			margin: 0 auto;
}

* html #nonFooter {
				   height: 100%;
}

#header1 {
	   width: 1000px;
	   height: 361px;
	   background: silver;
	   border: 1px solid red;
}

#logo {
	   width: 186px;
	   height: 97px;
	   margin-top: 30px;
	   margin-left: 38px;
	   background: url(../images/logo.png) no-repeat;
}

#menu {
		margin-top: 20px;
		margin-left: 73px;
		width: 230px;
}

ul#ul_menu {
			list-style: none;
}

ul#ul_menu li {
			margin-bottom: 5px;
}


#content {
		  padding-bottom: 150px;
}

#left {
	   width: 232px;
	   float: left;
	   margin-left: 50px;
	   display: inline;
	   margin-top: 15px;
}

.left_block {
			 margin-bottom: 30px;
}

.left_block_caption {
					 margin-bottom: 15px;
}

.blue_text {font: bold 12px verdana; color: #79a8c1;}

.red_text {font: bold 12px verdana; color: #ff3333;}

.left_block_picture {
					text-align: center;
}

.left_image_description {
						 margin-top: 10px;
						 margin-bottom: 20px;
						 text-align: left;
}

#text {
	   width: 616px;
	   float: left;
	   margin-left: 30px;	   
	   display: inline;
}

h1#page_caption {
				 color: #575353;
				 font: 30px verdana;
				 text-align: center;
}

#footer {
		 position: relative;
		 height: 100px;
		 width: 1000px;
		 margin: 0 auto;
		 margin-top: -100px;
		 background: url(../images/footer_bg.jpg) no-repeat right top;
}

#footer_left {
			  width: 232px;
			  float: left;
			  margin-left: 50px;
			  display: inline;
}

.footer_small_pics_block {
						  float: left;
						  margin-right: 50px;
}

#footer_right {
	   width: 350px;
	   height: 58px;
	   float: left;
	   margin-left: 30px;
	   display: inline;
	   font: 11px verdana;
	   letter-spacing: 1px;
	   color: #191919;
	   padding-left: 15px;
	   padding-top: 5px;
	   background: url(../images/orange_line.gif) no-repeat left top;
}

.clear {clear: both;}

Нормальное поведение:

НЕНОРМАЛЬНОЕ ПОВЕДЕНИЕ

Justnewone · April 23, 2009

Это наложение марджинов. Можно найти в интернете подробнее, а проще говоря - маргины умеют схлопываться, как между соседними элементами в потоке, там и от потомка к родителю (в вышем случае вываливается маргин от div id="logo"). Вылечить можно, назначив родителю паддинг, хоть тот же в 1px или назначить родителю overflow:hidden. Но у вас имеем:

#header1 {

width: 1000px;

height: 361px;

}

Так что советую отбиться паддингом в 1px, overflow:hidden все выступающее за габариты будет резать. При необходимости, скорректируйте внутренние сопрягающиеся маргины на -1px.

Удачи.

Edited April 23, 2009 by Justnewone

TonKhaO · April 24, 2009

Это наложение марджинов. Можно найти в интернете подробнее, а проще говоря - маргины умеют схлопываться, как между соседними элементами в потоке, там и от потомка к родителю (в вышем случае вываливается маргин от div id="logo"). Вылечить можно, назначив родителю паддинг, хоть тот же в 1px или назначить родителю overflow:hidden. Но у вас имеем:
#header1 {
width: 1000px;
height: 361px;
}
Так что советую отбиться паддингом в 1px, overflow:hidden все выступающее за габариты будет резать. При необходимости, скорректируйте внутренние сопрягающиеся маргины на -1px.
Удачи.

Простите не уверен что до конца к сожалению понял, а вы не знаете туторы хоть даж на английском где такая проблема обсуждается, вы как человек который с этим сталкивались наверняка знете какую нить статейку по этому поводу, и немного не понятно что вы подразумеваете под слово СХЛОПЫВАТЬСЯ :lol: и самое для меня неясное почему у меня без бордера маргин появляется конкретной высоты, то есть почему именно этой а скажем ни какой нить другой, от чего это зависит, брррр

бррр, посмотрел еще раз внимательно, смотрите какая интересная ситуация, значит как обычно убираю я бордер с #header1 (браузер OPERA) делаю релоад странице и получается вот это, то есть образовавшийся маргин у #header1 равен 60 пикселей

НО нажав F5 еще раз, марджин уменьшился до 30 пикселей тут более менее уже понятно почему 30 пикселей (у меня в #logo стоит марджин топ как раз 30 пикселей)

то есть теперь уже 2 вопроса не понятно

1. почему опера (на других пока не проверял) с первой загрузкой удваивает этот маргин

2. и собсно почему вообще этот маргин образовывается, бррр, ведь у меня блок #logo лежит внутри #header1 и тут же не понятно почему он (внутренний блок) влияет на отступы внешнего блока, бррр :lol:

Edited April 24, 2009 by TonKhaO

Justnewone · April 24, 2009

http://softwaremaniacs.org/blog/2005/09/05...t-flow-margins/

По поводу оперы - поведение ее не очень понятно, вероятно глюк и сейчас выяснять не очень хочется, учитывая что методы верстки у Вас не самые логичные. Например, на вскидку, дайте #header1 нужный паддинг, отобрав при этом излищний width: 1000px;, отберите у div id="logo" маргин и все будет хорошо. Или дайте #header1 падинг в 1пх. Если хотите разобраться с оперой, для начала копайте в свою верстку - тут простора для оптимизации выше крыши. Код можно уменьшить в разы.

Sign In

Странное поведение DIV при убирании BORDER

Question

TonKhaO

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

TonKhaO

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information