Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > background - глюк в отрисовке

Автор: Иль 23.1.2006, 12:20

Давно хотел спросить: Код <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body style="margin:0; padding:0"> <div style="background:#f00;"><div style="background:#FFFF00; margin:100px;">123</div></div> <div style="background:#f00; border:3px solid #000"><div style="background:#FFFF00; margin:100px;">123</div></div> </body> </html> Ребят, почему без бордера background у первого div не отрисовывается? И самое главное как это объясняется стандартами? Почему margin вложенного div без border у внешнего div "проваливается" как бы и применяется к внешнему div? Может так и должно быть по спецификации?

Автор: Illuminaty 23.1.2006, 12:37

Иль, у меня все нормально отображается FF1.5, IE 6 Браузер у тебя какой?

Автор: Иль 23.1.2006, 13:14

У меня во всех браузерах строчки Код <div style="background:#f00;"><div style="background:#FFFF00; margin:100px;">123</div></div> Код <div style="background:#f00; border:3px solid #000"><div style="background:#FFFF00; margin:100px;">123</div></div> выглядят по разному, причем как в CSS1 так и в Quirks режимах браузера (за исключением бордера в 3px конечно) Браузеры IE6.0, Mozilla, FireFox, Opera 8.0/8.5/9.0 Вот так это выглядит у меня: Ниже изображение (если оно не показываеся то то вот ссылка на HTML-страницу http://illvin.narod.ru/vyorstka/div.html )

Автор: Illuminaty 23.1.2006, 13:22

Иль, это я что-то сглупил... У меня срабатывает только margin-left и margin-right (в варианте без bolder)

Автор: Иль 23.1.2006, 13:27

Illuminaty, спасибо что посмотрел . Наверное так и должно быть. Сейчас пролистал стандарты - на вскидку не нашел почему так. Расстраивает, что не понимаю почему так работает

Автор: Illuminaty 23.1.2006, 13:31

а если написать так, то отображается как надо Код <div style="background:#f00; padding: 100px"><div style="background:#FFFF00;">123</div></div>

Автор: Иль 23.1.2006, 13:49

Illuminaty, спасибо, но я очень хочу понять помему mardin-top/bottom не работают. Про это и другие решения я знаю. Почему вот блочная модель ведет себя именно так?

Автор: Illuminaty 23.1.2006, 14:07

Иль, посмотри пункт http://loc.stack.ru/projects/CSS2/box.html#collapsing-margins в CSS2 спецификации. Особенно обрати внимание на слова Цитата которые не разделяются ни отступами, ни границами Удачи

Автор: Иль 23.1.2006, 20:15

Спасибо, то что доктор прописал! И к этому Код В CSS2 горизонтальные поля никогда не перекрываются.

Автор: o.s.a. 24.1.2006, 09:36

Что-то непонятно объяснено в спецификации, можно еще раз для "непонятливых"

Автор: Иль 24.1.2006, 20:28

Привет Если нет паддинга или бордера, то марджины сложаться как у меня в первом div Посмотри мою ссылку

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)