Показано с 1 по 4 из 4

Тема: border влияет на margin-top ?! FireFox

  1. #1

    Регистрация
    26.07.2006
    Сообщений
    18
    Господа, столкнулся с проблемой в FireFox 2.0.0.6
    div внутри div`a. У внешнего div`a задан отступ сверху и у внутренеего задан отступ сверху.
    если у внешнего не включён border, то у внутреннего не работает отступ!? Это глюки FF или нормально, как вылечить? спасибо.

    Пример DIV`a (ссылку сделать не могу - нет 10 сообщений)
    [Только зарегистрированные пользователи могут видеть ссылки. ]


    или тут листинг файла
    Код:
    <html><head></head><body bgcolor="#FFFFFF">
    <style type="text/css">
    
    
    .outside1 {
    ****margin-top:100px;
     * *border: 1px solid #0000a8;
    
     * *background: #8430df;
     * *width:102px;
     * *height:500px;
    
    }
    
    .inside1 {
    ****margin-top:50px;
     * *background: #8dd006;
    
     * *width:102px;
     * *height:300px;
    }
    
    
    .outside2 {
    ****margin-top:100px;
     * *border: 0px solid #0000a8;
    
     * *background: #8430df;
     * *width:102px;
     * *height:500px;
    
    }
    
    .inside2 {
    ****margin-top:50px;
     * *background: #8dd006;
    
     * *width:102px;
     * *height:300px;
    }
    </style>
    
    
    <table width="500" border="1" cellspacing="0" cellpadding="4">
    <tr>
     <td>
    ****<div class="outside1">
     *
    ****</div>
     </td>
     <td>
    ****<div class="outside2">
     *
    ****</div>
     </td>
    </tr>
    <tr>
     <td>
    2 одинаковыйх дива: 
    
    - у внешнего (фиолетовый) margin-top + <font color="#FF0000">border=1</font>
    
    - у внутреннего (зеленый) margin-top
    
    
     </td>
     <td>
    2 одинаковыйх дива: 
    
    - у внешнего (фиолетовый) margin-top + <font color="#FF0000">border=0</font>
    
    - у внутреннего (зеленый) margin-top
    
     </td>
    </tr>
    
    <tr>
     <td>
    CSS
    
    <pre>
    .outside1 {
    margin-top:100px;
    <font color="#FF0000">border:1px solid #0000a8;</font>
    
    background: #8430df;
    width:102px;
    height:500px;
    
    }
    
    .inside1 {
    margin-top:50px;
    background: #8dd006;
    
    width:102px;
    height:300px;
    }
    </pre>
     </td>
     <td>
    CSS
    
    <pre>
    .outside2 {
    margin-top:100px;
    <font color="#FF0000">border: 0px solid #0000a8;</font>
    
    background: #8430df;
    width:102px;
    height:500px;
    
    }
    
    .inside2 {
    margin-top:50px;
    background: #8dd006;
    
    width:102px;
    height:300px;
    }
    
    
    </pre> </td></tr></table></body></html>

  2. #2
    сталкивался с такой проблемой. кстати это наблюдаться не как баг фф, а как баг ИЕ, потомучто только ИЕ ведет себя иначе.

    обычно уходил от margin в сторону psdding)

  3. #3

    Регистрация
    26.07.2006
    Сообщений
    18
    млин, в ie как не странно поведение ожидаемо - есть бордер нет бордера пофигу. достаточно логично. понятно, ничего не сделать

    paddind ессно вариант, но с margin я подумал что у меня глюк. спасибо

  4. #4

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Это не баг FF, а правильное и ожидаемое поведение нормальных браузеров. Называется данный феномен "Вываливание полей дочерних элементов за границы родительских элементов". Почему это так происходит и для чего все это надо можно прочитать в Спецификации CSS или [Только зарегистрированные пользователи могут видеть ссылки. ].

Похожие темы

  1. IE, float: left, margin-bottom
    от Kiosuki в разделе Вёрстка сайта
    Ответов: 4
    Последнее сообщение: 08.09.2010, 20:28
  2. Не работает параметр margin-bottom в IE
    от Garic в разделе Вёрстка сайта
    Ответов: 2
    Последнее сообщение: 06.05.2008, 16:07
  3. margin-left и расстояние в ИЕ
    от DELPHIna в разделе Вёрстка сайта
    Ответов: 4
    Последнее сообщение: 27.08.2007, 19:31
  4. Помогите разобраться... наверно border
    от 100tik в разделе Вёрстка сайта
    Ответов: 4
    Последнее сообщение: 04.12.2006, 01:30
  5. 1px border стиль для list/menu
    от KLS в разделе Веб-программирование
    Ответов: 3
    Последнее сообщение: 13.08.2004, 17:49

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •