Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: **** кроссбраузерность!
 
 автор: ionico   (13.10.2008 в 03:17)   письмо автору
 
 

ув. программисты! такой вопрос... не могу понять, что происходит:

на страничке два дива:

<div id="first">тра-бла-бла-бла-бла-ля-ля</div>
<div id="second">тра-бла-бла-бла-бла-ля-ля</div>

лист стилей:

#first { width:100%; height: 50px; padding:10px 20px; margin: 0 0; }
#second { width:100%; height: 100%; margin:0 0; }


необходимо, чтобы второй "див" был прижат к первому... т.е. margin-bottom верхнего = 0 и margin-top нижнего тоже равен 0...
Margin'ы везде выставлены в "0", как видно из листа стилей.
В IE всё просто замечательно... но вдруг Опера решила повыкрутасничать, между "дивами" она сохраняет отступ...

причём интересно, что если убрать padding верхнего дива, то Опера всё отображает корректно...
скажите, почему padding верхнего дива влияет на положение нижнего??? О_о
вроде бы Padding это отступы от границ бокса до его содержимого...

как побороть данную пакость в Опере? заранее спасибо...

  Ответить  
 
 автор: PAT   (13.10.2008 в 03:47)   письмо автору
 
   для: ionico   (13.10.2008 в 03:17)
 

Попробуйте написать так:
html, body {width: 100%; height: 100%}
#first  {width: 100%; height: 50px; padding: 10px 20px}
#second {width: 100%; height: 100%} 


PS. Писать про нулевые маргины, в принципе, не надо - по умолчанию они и так во всех браузерах нулевые. Но даже если и нужно будет написать (положим, если выше в CSS-правилах указаны для ВСЕХ тегов <DIV> какие-то отступы), то запись margin: 0 0; неграмотна. Она как бы говорит - "у кого-то нет черепа и нет головного мозга". Хотя всем понятно, что вполне достаточно ограничиться только указанием на то, что нет черепа (а уж из этого отсутствия черепа проистекает отсутствие рта, носа, глаз, ушей... и головного мозга в том числе).
Правильным будет простое magin: 0; (с одним нулём)

  Ответить  
 
 автор: ionico   (13.10.2008 в 11:29)   письмо автору
 
   для: PAT   (13.10.2008 в 03:47)
 

ваш вариант не работает =(
а по-поводу margin: 0 0; не могу с вами согласиться, т.к. многие ведущие сайты в своих листах стилей пишут именно так... я понимаю душой и сердцем, что значение по умолчанию равно "0", но почему же тогда они пишут это?

и всё-таки почему в Oper'е Padding верхнего слоя влияет на отступ нижнего??? О_о у меня просто нет идей!

  Ответить  
 
 автор: jangot   (14.10.2008 в 14:51)   письмо автору
 
   для: ionico   (13.10.2008 в 11:29)
 

На сколько я знаю, пишут это обычно вначале css файла, обнуляя значения по умолчанию абсолютно для всех элементов но у тех у которых они есть по умолчанию: body, p, h1, h2 и тд.
Для дивов же нужно это делать если у вас в стилях где-то заданы отступы, то есть что бы их переопределить.
А уж писать margin: 0 0; не один уважающий себя верстальщик не станет. Так как это не грамотно. Почитайте спецификации.

Я скопировал ваш код, у меня ни в одном из браузеров никаких отступов не появилось, проверьте свои стили, может где-то стили перекрываются.
Напишите так:

#first { width:100%; height: 50px; padding:10px 20px; margin: 0 !important; }
#second { width:100%; height: 100%; margin:0 !important; } 

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования