Меню
Что нового?

Сьезжает вниз секция или ее подложка

webmos

webmos

Новичок
Всем привет,

создал такую конструкцию:

<section style="width:200px; background-image:url(/../AunddPics/Background_frendly_links.gif); ">

<h2 style="color:white; padding: 0 0 10px 10px;">Интересное в сети</h2>

</section>

В результате подложка секции (а может и вся секция) съезжает вниз (показано на приложенном рисунке). Если в стиль секции добавить границу border любой толщины, то все сразу выравнивается по верхней границе.

Кто-нибудь сталкивался с подобным поведением браузеров или я что-то не понимаю? (происходит в FF и в Chrome. в остальных - не смотрел).

PS: заранее извиняюсь, если надо было код вложить в теги PHP
 

Вложения

keltanas

keltanas

marty cats
А там все в порядке с блочностью, маргинами и позиционированием?
Тут, понимаешь ли, по этим данным и картинке сложно что-либо сказать. И достоверно не известно, как должно выглядеть на самом деле. Надо смотреть остальные стили, которые могут окружать эту секцию и только потом можно сделать однозначный вывод.
 
webmos

webmos

Новичок
Понимаю, что так сказать сложно и поэтому я взял этот кусочек и просто загнал в новый и чистый документ в DW (dreamveawer). Та же фигня! Никаких стилей, никаких лишних элементов.
Просто body с параметрами margin:0 и padding:0 ну и рамкой (чтобы видно было - где граница у самого body)
Далее вышеприведенная конструкция. Имеем на выходе - между рамкой body и подложкой секции приличное расстояние.

1. Если добавить в стиль секции - border:1px solid white, то все тут же становится на свои места.
2. Если из секции выкинуть заголовок h и вставить на его место, например, div (с тем же содержимым) - все становится на свои места
3. Если у заголовка h прописать margin:0 - все становится на места
То есть все три способа работают независимо друг от друга.

Вот, целиком:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body style="border:1px solid black; padding:0; margin:0;">

<section style="width:200px; margin:0; padding:0; background:#999;">
<h2 style="color:white;">Интересное в сети</h2>

</section>

</body>
</html>

P.S.: похоже на глюк браузеров. Подложка (фон или бекграунд) секции НЕ примыкает вплотную к границе body, а расстояние составляет около 1 см. мое разрешение 99 dpi
 
Semen

Semen

Семён
<h2 style="color:white;margin:0;">
У заголовков в html по умолчанию margin больше 0.
Поставь себе Firebug, легче будет отлаживать.
 
webmos

webmos

Новичок
Semen написал(а):
<h2 style="color:white;margin:0;">
У заголовков в html по умолчанию margin больше 0.
Поставь себе Firebug, легче будет отлаживать.
Нажмите для раскрытия...
Да, у заголовков margin больше нуля, только почему это влияет на положение родительской секции (или ее подложки)?
Заголовок же в секции находится.
 
webmos

webmos

Новичок
keltanas написал(а):
webmos
Может быть стоит присмотреться к http://html5boilerplate.com/?
То, что вызвает у тебя недоумение - всего лишь поведение браузера по дефолту.
Нажмите для раскрытия...
Простите, не очень понял, что это за сервис ?

По вашей второй ссылке, очевидно, какой-то сервис для просмотра? Так там правильно выводит, а вот браузер выводит с приличным расстоянием между границей body и section.

Похоже проблема связана с отображением браузерами кода HTML5 в стандартном режиме, так как без объявления типа документа отображается, как и раньше, то есть в плотную к границе body.

Только все-равно и в этом случае не может же смещение секции регулироваться наличием у нее границы! Это явный глюк
 
Последнее редактирование:
Semen

Semen

Семён
по этой ссылке выводит "правильно/как тебе надо" потому что там используется normalize.css, где есть правило
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
ссылка
Я повторюсь - поставь себе Firebug, легче будет отлаживать и меньше будет вопросов.
 
keltanas

keltanas

marty cats
webmos
Если лень сидеть и разбираться, почему так происходит, просто воспользуйся советом и возьми окружение из бойлерплейта с его css-ресетом и прочим.
 
webmos

webmos

Новичок
Спасибо ребята, я кажется понял зачем и об чем эта "бойлерная плата" :) Этот файл normalize.css нейтрализует глюки в работе стандартного режима браузера? (так на хабрехабре пишут). А остальные файлы: скрипты, файлы стилей и т.д. тоже служат заготовками в которых уже убраны глюки.

Там указано для заголовков: margin:0. Если ноль указать, то действительно все работает.
 
Последнее редактирование:
riff

riff

Новичок
Гугл даёт ответ в первой же ссылке : ) (margin top moves background)
section {
overflow: auto;
}
 
Последнее редактирование:
Войдите или зарегистрируйтесь для ответа.
Сверху