ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопорос к гуру
2 сообщений из 2, страница 1 из 1
Вопорос к гуру
    #35477369
Logo
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Logo
Гость
Немогу найти обьяснения, с точки зрения стандартов следующей ситуации. Верхний и нижний margin-ы соответственно первого и последнего дочернего элемента исчезают, и передаются родительскому элементу. Наблюдается в всех браузерах.

В процессе поиска решения заметил еще одну странность: если установить parent-у высоту в процентах(не вожно какую), в Опере и Сафари нижний margin показывается, как задуманно, хотя верхний остается как был! При том что по стандарту в данной ситуации процентное задание height должно интерпритироватся как auto!

См код
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" >
<title>Untitled Document</title>
<style type="text/css">
html,body {margin: 0 ; padding: 0 }
.parent {background:#f00;}


.child_one {height:300px; margin:20px; background:#0f0;}
.child_two {height:50px; margin:50px; background:#00f}


.some {height:20px; background:#ddd;}
</style>
</head>

<body>
<div class="some">некий див</div>
<div class="parent">
	<div class="child_one"> 1 -ый дочерний. margin:20px</div>
    <div class="child_two"> 2 -ой дочерний. margin:50px</div>
</div>
<div class="some">некий див</div>



<div style="position:absolute; top:22px; left:100px; border:1px solid #000; font: italic 10px cursive">Теоретически этих белых полос быть не должно, они должны быть заполнены красным цветом</div>
<div style="position:absolute; top:455px; left:100px; border:1px solid #000; font: italic 10px cursive">Теоретически этих белых полос быть не должно, они должны быть заполнены красным цветом</div>
</body>
</html>

З.Ы. О решении. Простое .parent {width:100%; display:table}
Но в этом случае нельзя задать margin-ы слева и справа .parent-у, чтобы он растягивался.
По сложней:
Для IE
.parent {zoom:1; /*или другое св-во, устанавливающее HasLayout*/}
Для остальных
.parent:before {display:block; content:""; width:0; border-bottom:1px solid transparent; margin-bottom:-1px;}
.parent:after {display:block; content:""; width:0; border-bottom:1px solid transparent; margin-top:-1px;}
...
Рейтинг: 0 / 0
07.08.2008, 22:46
| Ответить | Цитировать | Написать  
Вопорос к гуру
    #35477720
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Как вариант...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" >
<title>Untitled Document</title>
<style type="text/css">
html,body {
	margin: 0 ; 
	padding: 0 
}
.parent {
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 50px;
	background: #f00;
}
.child_one {
	height: 300px;
	margin-bottoms: 20px;
	background: #0f0;
}
.child_two {
	height:50px; 
	margin-top: 50px;
	margin-left: 30px;
	margin-right: 30px;
	background: #00f
}
.some {
	height: 20px; 
	background:#ddd;
}
</style>
</head>

<body>
<div class="some">некий див</div>
<div class="parent">
	<div class="child_one"> 1 -ый дочерний. margin:20px</div>
    <div class="child_two"> 2 -ой дочерний. margin:50px</div>
</div>
<div class="some">некий див</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
08.08.2008, 09:35
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопорос к гуру
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=324&tid=1456055]:
 0ms
get settings:
 10ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 52ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 225ms
total:  377ms
созд. / загр.: 377ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]