Футер налезает на контент в ie8

Тема в разделе "Веб-дизайн", создана пользователем miker, 14 мар 2011.

Модераторы: zek24
  1. miker

    miker

    Регистр.:
    31 июл 2006
    Сообщения:
    159
    Симпатии:
    120
    Вроде бы везде проверял верстку - все ок было.
    У заказчика начали смотреть в ie8 - первый раз всплыла проблема с тем, что футер наполз на контент. При обновлении страницы стало все ок.
    Сейчас запустил ietester (ie8 beta), наблюдаю ту же проблему.
    Возможно я чтото с позиционированием не доделал, не могу найти в чем причина...
    Урл: Перейти по ссылке
    Скрин во вложении.
     

    Вложения:

    • problem.jpg
      problem.jpg
      Размер файла:
      169,1 КБ
      Просмотров:
      16
  2. konoplya

    konoplya Постоялец

    Регистр.:
    3 авг 2008
    Сообщения:
    88
    Симпатии:
    16
    у меня и в фф и в ие8 всё нормально отображается и с первого раза, там в ие есть вверху кнопочка "предоставление совместимости"
     
    miker нравится это.
  3. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Странная ерунда, я только что открыл в ie6 и у меня футер налез
    на контент, только не так как на скрине, а с низу в районе
    "Характеристики профнастила С21-1000" начал смотреть код, потом
    обновил страницу и всё в порядке. Почистил кеш - без изменений.
     
    miker нравится это.
  4. miker

    miker

    Регистр.:
    31 июл 2006
    Сообщения:
    159
    Симпатии:
    120
    у заказчика возникла проблема с футером именно в том месте, где вы описали...
    а скрин это с программы ietester, так как у меня теперь тоже не видно косяка в ие, только при первом заходе на сайт :(
     
  5. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Я думаю, что проблема именно в самом footer, стоит стили просто переписать по своему
    PHP:
    <div id="truck">
        <
    div id="footer">
            <
    div id="copyright">
                <
    class="karat">&copy2011 ГК &laquo;Карат&raquo;. Все права защищены</p>
            </
    div>
            <
    div id="code-f">тел. <span>(4832)</span></div>
            <
    div id="phone1-f">68-66-79</div>
            <
    div id="phone2-f">68-75-78</div>
        </
    div><!-- #footer -->
    </div>
    Мне не нравиться, что relative, где-то внутри, нужно его в самое начало и отдельно, а дальше всё остальное. можно ещё добавить перед футером clear
    PHP:
    <div style="clear:both;"></div>
    <
    div style="position:relative;">
    <
    div id="truck">
        <
    div id="footer">
            <
    div id="copyright">
                <
    class="karat">&copy2011 ГК &laquo;Карат&raquo;. Все права защищены</p>
            </
    div>
            <
    div id="code-f">тел. <span>(4832)</span></div>
            <
    div id="phone1-f">68-66-79</div>
            <
    div id="phone2-f">68-75-78</div>
        </
    div><!-- #footer -->
    </div>
    </
    div>
    Здесь relative убрать, это как-то не грамотно.

    Код:
    #footer {
    	width: 1015px;
    	margin: 0 auto;
    	height: 180px;
    	background: url(truck000.jpg) right no-repeat;
    	position: relative;
    }
     
    miker нравится это.
  6. miker

    miker

    Регистр.:
    31 июл 2006
    Сообщения:
    159
    Симпатии:
    120
    Дописал дивы, теперь имеем следующую картину (вложение). Clear до этого пробовал тоже - не помогло :(

    по поводу relative для блока footer, прописал его потому что там еще абсолютные значения у телефонов на фуре и у копирайта...
     

    Вложения:

    • pr2.jpg
      pr2.jpg
      Размер файла:
      173,5 КБ
      Просмотров:
      4
  7. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Возьми мой вариант, я просто написал так, как бы я написал

    PHP:
    <style>

    #footer {background:url(http://www.gkkarat.ru/i/footer-bg.png) top left repeat-x; height:180px; width:100%; position:relative;}
    .truck {backgroundurl(http://www.gkkarat.ru/i/truck.jpg) 70% 0 no-repeat; height:180px; width:100%;}
    .karat {font:italic 400 16px GeorgiaarialhelveticaSans-serifcolor:#055c9f; position:absolute; left: 6%; top: 64px}

    #code-f {position:absolute; left: 64%; top: 63px; margin-left:-80px;}
    #phone1-f {position:absolute; left: 64%; top: 52px;}
    #phone2-f {position:absolute; left: 64%; top: 72px;}

    </style>



    <
    div id="footer">
       <
    div class="truck"></div>
       <
    div class="karat">© 2011 ГК «Карат»Все права защищены</div>
       
       <
    div id="code-f">тел. (4832)</div>
       <
    div id="phone1-f" >68-66-79</div>
       <
    div id="phone2-f">68-75-78</div>   
       
    </
    div>

     
    miker нравится это.