Отрывается блок от потока

TheKIP · January 7, 2010

Есть сайт, в котором закругление углов, сделано отдельнм блоком идущим сразу же за основным. (ширина фиксированная, поэтому картинка одна, на оба угла)

В ИЕ, это отображается првильно, а в Лисе, появляется лишний пробел, котороый "отрывает" низ от основной части.

http://yaolga.thekip.ru

Можно конечно по мудозаться, и задать отрицательный маржин, что бы блок подскочил на верх, а что бы текст не налазил, сделать основному блоку внизу паддинг с запасом, но это не решеение. Просто интересно из за чего появляетс подобный эффект.

Ведь между этими блоками ничего не стоит, и ни одному из блоков не заданны отступы и никакие другие коварные свойства.

psywalker · January 7, 2010

Есть сайт, в котором закругление углов, сделано отдельнм блоком идущим сразу же за основным. (ширина фиксированная, поэтому картинка одна, на оба угла)
В ИЕ, это отображается првильно, а в Лисе, появляется лишний пробел, котороый "отрывает" низ от основной части.
http://yaolga.thekip.ru
Можно конечно по мудозаться, и задать отрицательный маржин, что бы блок подскочил на верх, а что бы текст не налазил, сделать основному блоку внизу паддинг с запасом, но это не решеение. Просто интересно из за чего появляетс подобный эффект.
Ведь между этими блоками ничего не стоит, и ни одному из блоков не заданны отступы и никакие другие коварные свойства.

1) Какой ИЕ, версия?

2) Что за блок?

3) Скриншот и подробное объяснение проблемы

TheKIP · January 7, 2010

Надеялся что зайдете на сайт. Там намного проще посмотреть, чем со скриншота.

Вот содержимое css, где первый блок это основной, а блок "сепаратор" это окончание с закругляющими краями.

.article-content {
	padding:0 20px;
	margin-left:8px;
	width:570px;
	background:#FFF;}

.article_separator {
	display:block;
	margin:0 0 0 7px;
	width:610px;
	height:16px;
	background:url(images/content_bottom_edge.png)}

А так выглядит HTML. Я выдрал кусок с этими блоками. аналогично, див блок с контентом - основной, сепаратор - край с углами.

<div class="contentpaneopen">

		<div class="article-tools">
			<div class="article-meta">

				<span class="createdate">07.01.2010 14:19	</span>
    			<h2 class="contentheading">«Вредные» советы	</h2>

			</div>
		</div>

	<div class="article-content">
		Здесь должен находится текст. Я уего удалил для удобочитаемости
		<div style="clear: both;"></div>
	</div>

</div>
<span class="article_separator"> </span>

Описание проблемы уже писал. Подробнее некуда. по скрину и так все понятно.

TheKIP · January 7, 2010

проблему решил.

Я определил некоторую зависимость, которая выражалась в том что, при большом количестве текста проблема появлялась, а при маленьком (2-3 строки, которые даже не наполнянли блок до минимальной высоты) проблема исчезала.

Значит текст, приближающийся к гринце блока каким то образом на это влияет.

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

psywalker · January 7, 2010

проблему решил.
Я определил некоторую зависимость, которая выражалась в том что, при большом количестве текста проблема появлялась, а при маленьком (2-3 строки, которые даже не наполнянли блок до минимальной высоты) проблема исчезала.
Значит текст, приближающийся к гринце блока каким то образом на это влияет.
В общем помогло добавление паддинга снизу, в 1 пиксель. Проблема сразу исчезла. Видимо в мозиле какой то глюк, лечащийся подобным способом.

Как раз в Мозиле всё работало отлично, потому-что твой случай называется "Выпадение границ"

Dessss · January 7, 2010

Какое выпадение границ господа. Да тут тупо дефолтные маржины у p не обнулены поэтому у последнего параграфа идет дефолтный маржит который рвет спан с кругляшками к низу. Как выход ставить маржины топ у всех p. Или ботом но при это заезжать на такоеже расстояние нижним спамом наверх отрицатетьным маржином. А вообще дефолтные маржины обнулять или перебивать нужно всегда т.к в разный браузерах они разные.

psywalker · January 7, 2010

Какое выпадение границ господа. Да тут тупо дефолтные маржины у p не обнулены поэтому у последнего параграфа идет дефолтный маржит который рвет спан с кругляшками к низу. Как выход ставить маржины топ у всех p. Или ботом но при это заезжать на такоеже расстояние нижним спамом наверх отрицатетьным маржином. А вообще дефолтные маржины обнулять или перебивать нужно всегда т.к в разный браузерах они разные.

Я не всматривался в код, но просто подумал так из-за паддинга, который спас ситуацию

TheKIP · January 7, 2010

Какое выпадение границ господа. Да тут тупо дефолтные маржины у p не обнулены поэтому у последнего параграфа идет дефолтный маржит который рвет спан с кругляшками к низу. Как выход ставить маржины топ у всех p. Или ботом но при это заезжать на такоеже расстояние нижним спамом наверх отрицатетьным маржином. А вообще дефолтные маржины обнулять или перебивать нужно всегда т.к в разный браузерах они разные.

Я тоже об этом подумал. Но здравая логика и поверхностное знание блочной модели, подсказывали что этого быть не должно.

И я решил проблему по своему, я сначала попытался перекрыть пробел паддингом, и поставил величину паддинга равную пробелу, который необходимо убрать, ну а потом понял, что даже добавление паддинга в 1 пиксель проблему решает.

А кстати про проблемы выпадения границ, слышу в первый раз, надо будет по гуглить.

Век живи, век учись.

Всем спасибо.

s0rr0w · January 7, 2010

Какое выпадение границ господа. Да тут тупо дефолтные маржины у p не обнулены поэтому у последнего параграфа идет дефолтный маржит который рвет спан с кругляшками к низу. Как выход ставить маржины топ у всех p. Или ботом но при это заезжать на такоеже расстояние нижним спамом наверх отрицатетьным маржином. А вообще дефолтные маржины обнулять или перебивать нужно всегда т.к в разный браузерах они разные.

Прекратите давать вредные советы. Наплевать на то, что каждый браузер рисует свои отступы по умолчанию.

Никуда не нужно наезжать отрицательными марджинами, достаточно

* у контейнера article-content сделать снизу белую границу в один пиксель.

* или поставить паддинг толщиной в 1 пиксель

* или overflow: hidden

Я тоже об этом подумал. Но здравая логика и поверхностное знание блочной модели, подсказывали что этого быть не должно.

Поверхностное знание как раз не дает полного ответа на происходящее. Так наоборот должно быть.

А кстати про проблемы выпадения границ, слышу в первый раз, надо будет по гуглить.

margin collapsing - вот это ищите. На русский это переводят как угодно, один из вариантов - схлопывание отступов

psywalker · January 7, 2010

Прекратите давать вредные советы. Наплевать на то, что каждый браузер рисует свои отступы по умолчанию.
Никуда не нужно наезжать отрицательными марджинами, достаточно
* у контейнера article-content сделать снизу белую границу в один пиксель.
* или поставить паддинг толщиной в 1 пиксель
* или overflow: hidden

Значит вываливание границ всё-же и я был прав :lol:

s0rr0w · January 7, 2010

Значит вываливание границ всё-же и я был прав

Границы никуда не вываливаются. Они коллапсируются.

psywalker · January 7, 2010

Границы никуда не вываливаются. Они коллапсируются.

В смысле?

s0rr0w · January 7, 2010

В смысле?

В прямом. Называть этот эффект выпадением границ - неправильно.

psywalker · January 7, 2010

В прямом. Называть этот эффект выпадением границ - неправильно.

Хм..странно, вроде даже всякие Гуру типа Майера называют это выпадением полей.

s0rr0w · January 7, 2010

Хм..странно, вроде даже всякие Гуру типа Майера называют это выпадением полей.

Ссылку на первоисточник в студию :lol:

psywalker · January 7, 2010

Ссылку на первоисточник в студию

http://www.complexspiral.com/publications/...apsing-margins/

s0rr0w · January 7, 2010

Не нашел ни одного упоминание про выпадение границ.

Переводчику - два с минусом за искажение сути.

psywalker · January 7, 2010

Не нашел ни одного упоминание про выпадение границ.
Переводчику - два с минусом за искажение сути.

Тоесть я хотел сказать "Схлопывание поля", а переводчик Гугл)))

Поэтому полагаю, что "Схлопыванием полей" - это можно назвать смело :lol:

Dessss · January 8, 2010

Прекратите давать вредные советы. Наплевать на то, что каждый браузер рисует свои отступы по умолчанию.
Никуда не нужно наезжать отрицательными марджинами, достаточно
* у контейнера article-content сделать снизу белую границу в один пиксель.
* или поставить паддинг толщиной в 1 пиксель
* или overflow: hidden
Поверхностное знание как раз не дает полного ответа на происходящее. Так наоборот должно быть.
margin collapsing - вот это ищите. На русский это переводят как угодно, один из вариантов - схлопывание отступов

Вредные? Наплевать? Тогда чему удивляться если все выпадает и разлетается. Дефолтные значения всегда нужно либо обнулять либо изменять. Даже сейчас в ИЕ 6 отступ между параграфами больше чем в лисе и в опере (ну не считая неподключенных пнг фильтров). Конечно такое можно исправить многими способами и почему то вы не предлагаете убрать первоисточник проблем. Падинг и овер просто дадут блоку возможность захватить нижний маржин в блок. И кстати потесть в разных браузерах у меня в 6 ие меню упало.

P.S. Есть просто способ не создавать ситуацию схлопывания блоков - это не юзать верхний маржин вместе с нижним и вообще юзать только один. А еще лучше забудьте о маржинах юзайте падинг.

Edited January 8, 2010 by Dessss

TheKIP · January 8, 2010

с тупил

Edited January 8, 2010 by TheKIP

s0rr0w · January 8, 2010

Вредные? Наплевать? Тогда чему удивляться если все выпадает и разлетается. Дефолтные значения всегда нужно либо обнулять либо изменять.

Зачем? :lol: Они по умолчанию очень неплохо смотрятся. Да, пусть и по-разному, но люди привыкли к такому уже.

Даже сейчас в ИЕ 6 отступ между параграфами больше чем в лисе и в опере (ну не считая неподключенных пнг фильтров). Конечно такое можно исправить многими способами и почему то вы не предлагаете убрать первоисточник проблем.

Ну и что что они разные, эти отступы? Зачем их убирать, обнулять, переопределять? Это не источник проблем. Главный источник проблем - пустота в голове кодера в том месте, где должны быть знания css.

Падинг и овер просто дадут блоку возможность захватить нижний маржин в блок. И кстати потесть в разных браузерах у меня в 6 ие меню упало.
P.S. Есть просто способ не создавать ситуацию схлопывания блоков - это не юзать верхний маржин вместе с нижним и вообще юзать только один. А еще лучше забудьте о маржинах юзайте падинг.

Мдаааа... советы один "круче" другого. Люди не зря придумали margin'ы и padding'и отдельно. Главное - использовать их с умом, а для этого нужно выучить матчасть для начала.

psywalker · January 8, 2010

Я всегда смотрю на ситуацию и зачастую она диктует мне обнуление, так как на выходе мне нужно получить одинаковое отображение во всех браузерах.

s0rr0w · January 8, 2010

Я всегда смотрю на ситуацию и зачастую она диктует мне обнуление, так как на выходе мне нужно получить одинаковое отображение во всех браузерах.

А кто это оценит? Пользователи? Им все равно, они ведь используют только ОДИН продукт.

psywalker · January 8, 2010

А кто это оценит? Пользователи? Им все равно, они ведь используют только ОДИН продукт.

Это ценит заказчик в первую очередь и если нужно чтобы везде всё отображалось и смотрелось одинаково, то так и будет смотрется!

s0rr0w · January 8, 2010

Это ценит заказчик в первую очередь и если нужно чтобы везде всё отображалось и смотрелось одинаково, то так и будет смотрется!

Заказчик это будет оценивать только тогда, когда его цель - не заплатить тебе деньги.

В противном случае заказчику глубоко фиолетово.

psywalker · January 8, 2010

Заказчик это будет оценивать только тогда, когда его цель - не заплатить тебе деньги.
В противном случае заказчику глубоко фиолетово.

Ааа, тоесть я так понял, неважно что он хочет, я легко могу делать то, что мне нужно, так? :lol:

Я понял, в следующий раз я просто сам уже буду указывать ему, что мне нужно, а не ему!

Sign In

Отрывается блок от потока

Question

Link to comment

Share on other sites

46 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information