1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

Как устранить ошибку отображения

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Novichok1991, 22 май 2016.

  1. Novichok1991

    Novichok1991

    Регистрация:
    22 май 2016
    Сообщения:
    3
    Симпатии:
    0
    Добрый день! Учусь верстать и вот такая вот проблема - сверстал три блока (у каждого свой цвет или картинка для заливки) и у двоих есть пунктирная рамка - в firefox отображается нормально
    а вот в 7 версии интернет експлорера плывет - пунктирная рамка почему то в промежутках между черточками использует цвет не блока в котором она прописана а цвет body.
    Кто то знает как устранить это недоразумение?
     
    Novichok1991, 22 май 2016
    #1
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    1. нужно предоставить html, css
    2. забить на ie7? зачем вы его поддерживаете?
     
    $iD, 22 май 2016
    #2
  3. Novichok1991

    Novichok1991

    Регистрация:
    22 май 2016
    Сообщения:
    3
    Симпатии:
    0
    HTML:
    <!DOCTYPE html>
<html>
    <head>
       <title>page</title>
       <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
       <link href="css/index.css" rel="stylesheet">      
    </head>
    <body>
<div id="footer">
            <div id="footer_upper">
            </div>
            <div id="footer_average">
                <div id="footer_average_center">
                    <h3><span>RECENT POSTS</span></h3>
                    <ul>
                        <li><a href="#">TVGuide.com Watchlist Predicts Fall TV Shows’ Success</a></li>
                        <li><a href="#">7 Ways to Create a Memorable Customer Experience With Social Media</a></li>
                        <li><a href="#">Apple Gives Its Key Execs $400 Million in Bonuses</a></li>
                        <li><a href="#">How 5 Tech Giants Are Giving Back to Education</a></li>
                        <li><a href="#">Battlefield 3 Has Record Opening Weekend Despite Tech Woes</a></li>
                        <li><a href="#">The Evolving Role of Social Media in  News Organizations [LIVE Q&A]</a></li>
                    </ul>
                </div>
            </div>
            <div id="footer_lower">
                <div id="footer_lower_in">
                    <p class="p-right">Powered by<span> WordPress </span>- Designed &#38; Developed By<span> Mahdi El Hanafi</span></p>
                    <p class="p-left">Copyright &#169; 2011 <span>Ride Magazine</span> All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </body>
</html>
    CSS:
    HTML:
    #footer_upper {
   margin: 0;
   height: 17px;
   min-width: 960px;
   background: green;
   border-bottom: 2px dashed red;
}
#footer_average {
   margin: 0 auto;
   background-image: url(../images/footer_average.jpg);
   background-repeat: repeat;
   min-width: 960px;
   max-width: 1200px;
   border-bottom: 2px dashed red;
   padding-bottom: 62px;
   overflow: hidden;
}
/*--footer_average_center--*/
#footer_average_center {
   padding-top: 60px;
   margin: 0 auto;
   width: 252px;
}
#footer_average_center h3 {
   background: url(../images/footer_center_line_bg.png);
   background-repeat: repeat-x;
   background-position: 0 4px;
   width: 219px;
}
#footer_average_center h3 span {
   background: url(../images/footer_average.jpg);
   padding-left: 2px;
   padding-right: 14px;
}
#footer_average_center li a{
   padding-top: 17px;
   padding-bottom: 16px;
   color: #cccccc;
   display: block;
   border-bottom: 2px dashed red;
   text-decoration: none;
}
/*--footer_lower--*/
#footer_lower {
   margin: 0 auto;
   background: green;
   min-width: 960px;
   overflow: hidden;
}
#footer_lower_in {
   margin: 0 auto;
   min-width: 960px;
   max-width: 1200px;
   overflow: hidden;
}
.p-right{
   float: right;
}
#footer_lower_in p {
   padding: 33px 10px 31px 10px;
}
#footer_lower_in span{
   font-size: 12.47px;
   color: #999999;
}
    Поддерживаю ie7 так как он есть в средствах разработчика ie8. А его уже не надо поддерживать? ато я только учусь...
     
    Lasted edited by : 22 май 2016
    Novichok1991, 22 май 2016
    #3
  4. alex_storm

    alex_storm webdev

    Регистрация:
    11 дек 2012
    Сообщения:
    1.151
    Симпатии:
    667
    Официально уже и ie8 не поддерживается :Smile:
    Но некоторые компании требуют 8ку для поддержки
     
    alex_storm, 22 май 2016
    #4
  5. Novichok1991

    Novichok1991

    Регистрация:
    22 май 2016
    Сообщения:
    3
    Симпатии:
    0
    хотелось бы все таки знать как устранить это конфликт - мало ли когда то придется столкнутся и тогда уже не отвертеться....!
     
    Novichok1991, 22 май 2016
    #5
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Любопытная логика.
    На сегодняшний день есть смысл поддерживать только ИЕ11 (ну и Edge).
    А причина в том, что в семёрке и выше ИЕ автоматом обновляется до 11 версии (ели пользователь вообще хоть иногда обновляет систему), а в XP он не может обновиться дальше восьмой версии, которая и на момент актуальности была не сильно пригодна для использования, а на текущий момент ею могут пользоваться разве что те, кто не пользуется Гуглом, который уже третий год, как прекратил поддержку ИЕ8 :Smile:

    И на последок: инструменты разработчика в ИЕ малость кривые и там поведения вёрстки в режимах разных версий ИЕ не соответствует тому, как она выглядит в реальности в этих версиях, проверено на собственном опыте.

    Не придётся никогда! А если кто-то попросит верстать под ИЕ7 - его можно посылать далеко и грубо :Smile:

    Это последствие особенности блочной модели старых ИЕ. Устраняется костылями. Например, подкладыванием под блок другого блока, большего размера с таким же фоном и конечно же, нужны отдельные стили, чтоб этот блок подложка был виден только в ИЕ.
     
    Dotrox, 26 май 2016
    #6
< Адаптивная верстка | смещение блоков с увеличением\уменьшением контента >