Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопорос к гуру / 2 сообщений из 2, страница 1 из 1
07.08.2008, 22:46
    #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
| Ответить | Цитировать | Написать  
08.08.2008, 09:35
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Вопорос к гуру / 2 сообщений из 2, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 443ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1456055]:
 0ms
get settings:
 5ms
get forum list:
 9ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 155ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 40ms
get tp. blocked users:
 1ms
others: 218ms
total:  443ms
x
x
Закрыть


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