1 (27.09.2012 20:58 отредактировано Alkuuzz)

Тема: Некорректное отображение шаблона dle 9.7 в IE

Стоял у меня dle 9.6 и шаблон balance. Все было норм. Затем поставил dle 9.7 с нуля и адаптировал шаблон по инструкции. Все было норм, залил сайт на сервер, все норм. Сначала проверил на всем, кроме IE, затем и его открыл и был шокирован увиденным! Все выровнялось по левому краю, да и ужасно наложилось друг на друга и перемешалось... Очень не приятно, т.к. особых знаний в верстке нет. Возвращать dle 9.6 не хочу! Предполагаю какой-то кривой тег все портит, но что бы не менял, отображается все криво, но по разному. Может кто-нибудь подскажет с чего начать или поможет? Заранее спасибо!

Исходный код:

<!DOCTYPE html>
<html lang dir="ltr">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
{headers}
<link rel="shortcut icon" href="Balance_posts_files/favicon0.ico">
<script type="text/javascript" src="Balance_posts_files/jquery00.js"></script>
<link rel="stylesheet" href="Balance_posts_files/widgetki.css">
<script type="text/javascript" src="Balance_posts_files/widgetki.js"></script>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<link rel="stylesheet" href="{THEME}/style/template.css">
<link rel="stylesheet" href="{THEME}/style/css00000.css">
<link rel="stylesheet" href="{THEME}/style/css00001.css">
<script src="{THEME}/style/template.js"></script>
<script src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript"></script>
<script src="{THEME}/style/myriad-pro.cufonfonts.js" type="text/javascript"></script>
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
<script type="text/javascript">
Cufon.replace('h1,h2,h3,h4,h5,h6,ul,li,.breadcrumbs,.meta,p,.links,time,footer', { fontFamily: 'Myriad Pro Regular', hover: true }); 
</script>
<link media="screen" href="{THEME}/style/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/style/js/libs.js"></script>
<script language="javascript" type="text/javascript">
 <!--
 var d = new Date();
 
 var month=new Array("января","февраля","марта","апреля","мая","июня",
 "июля","августа","сентября","октября","ноября","декабря");
 var day=new Array("Воскресенье","Понедельник","Вторник",
 "Среда","Четверг","Пятница","Суббота");
 var TODAY = day[d.getDay()] +" " +d.getDate()+ " " + month[d.getMonth()]
 + " " + d.getFullYear() + "";
 //--></script>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-34861293-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body id="page" class="page sidebar-a-right sidebar-b-right isblog wp-archive wp-category wp-cat-3" data-config="{&quot;twitter&quot;:0,&quot;plusone&quot;:0,&quot;style&quot;:&quot;default&quot;}">
{AJAX}
<div id="block-main"><div>
<div class="wrapper">
<header id="header">
<div id="toolbar" class="grid-block">
<div class="float-right"><div class="module   deepest">
   <ul class="menu menu-line"><li class="level1 item70"><a href="" class="level1"><span>Функции</span></a></li>
   <li class="level1 item71"><a href="" class="level1"><span>Преимущества</span></a></li>
   <li class="level1 item69 active current"><a href="" class="level1 active current"><span>Новости</span></a></li>
</ul>        
</div></div>
</div>
<div id="headerbar" class="grid-block">
   <a id="logo" href="/"><div class="custom-logo"></div></a>
<div class="left"><div class="module   deepest">
<ul class="social-icons">
   <li class="twitter"><a href="#"></a></li>
   <li class="googleplus"><a href="#"></a></li>
   <li class="facebook"><a href="#"></a></li>
   <li class="youtube"><a href="#"></a></li>
   <li class="flickr"><a href="#"></a></li>
</ul>        
</div></div>
</div>
<div id="menubar" class="grid-block">
<nav id="menu"><ul class="menu menu-dropdown">
   <li class="level1 item1 parent active current "><a href="http://uk-lifestyle.ru/" class="level1  active current"><span>Главная</span></a></li>
   
   <li class="level1 item2 parent"><a href="http://uk-lifestyle.ru/main/1-about_me.html" class="level1 parent"><span>Обо мне</span></a>
<div class="width100 column">
   
   <li class="level1 item2 parent"><a href="http://uk-lifestyle.ru/main/3-link.html" class="level1 parent"><span>Контакты</span></a>
<div class="width100 column">
   
   <li class="level1 item5 parent hassubtitle"><a href="http://uk-lifestyle.ru/main/2-translation.html" class="level1 parent"><span>
   <span class="icon" style="background-image: url({THEME}/style/LewsDDQ0.png);"> </span><span>Заказать перевод</span></span></a>
   <div class="width100 column">
   
   <li class="level1 item2 parent active"><a href="http://uk-lifestyle.ru/lastnews" class="level1 parent"><span>Новости</span></a>
   <div class="dropdown columns1"><div class="dropdown-bg"><div><div class="width100 column"><ul class="level2">
      <li class="level2 item1"><a href="" class="level2"><span>HTML5&CSS3</span></a></li>
      <li class="level2 item1"><a href="" class="level2"><span>HTML5&CSS3</span></a></li>
      <li class="level2 item1"><a href="" class="level2"><span>HTML5&CSS3</span></a></li>
      <li class="level2 item1"><a href="" class="level2"><span>HTML5&CSS3</span></a></li>
</ul>
</nav>
<div id="menubar-r"><div></div></div>
<div id="search">        
<form id="searchbox" action="" method="get" role="search">
<input type="text" value name="s" placeholder="Найти...">
<button type="reset" value="Отчистить"></button>
</form>
</div>
</div>
</header>[aviable=main]<div id="main" class="grid-block">
            
                <div id="maininner" class="grid-box">
                
                        
                                        <section id="content"><div class="grid-block">
                    
                                                
                        <div id="system">

                    
        <article class="item">
        
            <header>
                <h1 class="title">На сайте вы найдете:</h1>
            </header>
            
            <div class="content clearfix">

<div class="clearfix">

<div class="demo-box-article">
    <img src="{THEME}/style/icons/articles.png" width="62" height="62" alt="Demo" />
<small>Интересные статьи</small>
<h3>Статьи на тему "жизнь в Великобритании" и многое другое!</h3>
</div>

<div class="demo-box-article">
    <img src="{THEME}/style/icons/photos.png" width="62" height="62" alt="Demo" />
<small>Фотографии Англии</small>
<h3>Красочные фотографии интересных мест Великобритании!</h3>
</div>

  <div class="demo-box-article">
      <img src="{THEME}/style/icons/videos.png" width="62" height="62" alt="Demo" />
<small>Видеоматериалы</small>
<h3>Разнообразные видео на различные тематики</h3>
</div>
  
    
<div class="demo-box-article">
    <img src="{THEME}/style/icons/events.png" width="62" height="62" alt="Demo" />
<small>События и факты</small>
<h3>Инересные события, происходящие в Великобритании!</h3>
</div>


</div></div>

                
        </article>
        
                
    
</div>        
                
                    </div>
                    <section id="top-b" class="grid-block"><div class="grid-box width33 grid-h"><div class="module mod-box ">
    <div class="deepest">

    
        <h3 class="module-title">Репетиторство</h3>        <img class="size-auto" src="{THEME}/style/mod20000.jpg" width="310" height="190" alt="Demo" />
<p>Интерактивные занятия английским языком через Skype.</p>
<a class="button-more" href="http://uk-lifestyle.ru/main/6-repititorstvo.html">Читать далее</a>
    </div>
</div></div><div class="grid-box width33 grid-h"><div class="module mod-box ">
    <div class="deepest">

                
        <h3 class="module-title">Переводы</h3>        <img class="size-auto" src="{THEME}/style/mod30000.jpg" width="310" height="190" alt="Demo" />
<p>Услуги по переводу любых текстов!</p>
<a class="button-more" href="http://uk-lifestyle.ru/main/7-perevody.html">Читать далее</a>
    </div>
</div></div><div class="grid-box width33 grid-h"><div class="module mod-box ">
    <div class="deepest">

            
        <h3 class="module-title">Организация поездки</h3>        <img class="size-auto" src="{THEME}/style/mod10000.jpg" width="310" height="190" alt="Demo" />
<p>Оформление анкеты на визу, организационные вопросы!</p>
<a class="button-more" href="http://uk-lifestyle.ru/main/8-organizaciya-poezdok.html">Читать далее</a>
    </div>
</div></div></section>
                    </section>
                        
                        
                </div>
                
                <!-- maininner end -->
                
                                <aside id="sidebar-a" class="grid-box"><div class="grid-box width100 grid-v"><div class="module mod-box ">
    <div class="deepest">

                
        <h3 class="module-title">Навигация</h3>        

<ul class="menu menu-sidebar">
<li class="level1 item555"><a href="http://uk-lifestyle.ru" class="level1"><span>Главная</span></a></li>
<li class="level1 item566"><a href="lastnews" class="level1"><span>Новости</span></a></li>
<li class="level1 item567"><a href="articles" class="level1"><span>Статьи</span></a></li>
<li class="level1 item558"><a href="videos" class="level1"><span>Видео</span></a></li>
<li class="level1 item569"><a href="audio" class="level1"><span>Аудио</span></a></li>
<li class="level1 item570"><a href="Photos" class="level1"><span>Изображения</span></a></li></ul>
    </div>
    
</div></div>
<div class="grid-box width100 grid-v"><div class="module mod-box ">
    <div class="deepest">
{login}
    </div>
</div></div>
   
     <div class="grid-box width100 grid-v"><div class="module mod-box ">
    <div class="deepest">

                
        <h3 class="module-title">Новости</h3>        <ul class="line line-icon">
    {topnews}
        </ul>
    </div>
</div></div>                               
                                    
<div class="grid-box width100 grid-v"><div class="module   deepest">

            
    
</div></div></aside>
                                
                    
            </div>
                        <!-- main end -->
    
                        
        </div>
        
    </div></div>
<div id="block-footer">
    
        <div class="wrapper">
        
[/aviable]
[not-aviable=main]    
<div id="main" class="grid-block">
<div id="maininner" class="grid-box">
<section id="content"><div class="grid-block">
<section id="breadcrumbs">
  <div class="breadcrumbs">{speedbar}</div></section>
<div id="system">
<div class="items items-col-1 grid-block"><div class="grid-box width100">
{info}
{content}
</div></div>        
                
    
</div>                        
                    </div></section>
                        
                        
                </div>
            
<aside id="sidebar-a" class="grid-box"><div class="grid-box width100 grid-v"><div class="module mod-box ">
    <div class="deepest">

                
        <h3 class="module-title">Навигация</h3>        
<ul class="menu menu-sidebar">
  <li class="level1 item555"><a href="http://test1.ru" class="level1"><span>Главная</span></a></li>
  <li class="level1 item566"><a href="" class="level1"><span>Новости</span></a></li>
  <li class="level1 item566"><a href="" class="level1"><span>Статьи</span></a></li>
  <li class="level1 item568"><a href="" class="level1">Видео</a></li>
  <li class="level1 item569"><a href="" class="level1"><span>Аудио</span></a></li>
  <li class="level1 item570"><a href="" class="level1"><span>Изображения</span></a></li></ul>        


    </div>
</div></div>

<div class="grid-box width100 grid-v"><div class="module mod-box ">
    <div class="deepest">
{login}
    </div>
</div></div>
    
    

<div class="grid-box width100 grid-v"><div class="module mod-box ">
    <div class="deepest">
{vote}
    </div>
</div></div>

<div class="grid-box width100 grid-v"><div class="module mod-box ">
    <div class="deepest">

                
        <h3 class="module-title">Новости</h3>        <ul class="line line-icon">
    {topnews}
        </ul>
    </div>
</div></div><div class="grid-box width100 grid-v"><div class="module mod-box ">
    <div class="deepest">

                
        <h3 class="module-title">Теги</h3>        <ul class="blank tagcloud">
        
        
        {tags}</ul>
    
    
    </div>
</div></div>

 [group=1]

<div class="grid-box width100 grid-v"><div class="module mod-box ">
    <div class="deepest">

                
        <h3 class="module-title"><span class="color">Наши</span> друзья</h3>        
<ul class="line line-icon">
<li><a href="http://websmaster.in" target="_blank">***</a></li>

    </ul>
    </div>
</div></div>
 [/group]
</aside>
</div>
</div>
<div id="block-footer">
<div class="wrapper">
[/not-aviable]
<footer id="footer" class="grid-block">
   <a id="totop-scroller" href="#page"></a>
<div class="module  deepest"><ul class="menu menu-line">
   <li class="level1 item70"><a href="" class="level1"><span>Связь с администратором</span></a></li>
   <li class="level1 item71"><a href="" class="level1"><span>Оставить отзыв</span></a></li>
   <li class="level1 item69 active current"><a href="" class="level1 active current"><span>RSS</span></a></li></ul>        
</div>
<div class="module  deepest">

            Copyright © 2012
</div>
            </footer>
        
        </div>
        
    </div>
    <!-- Yandex.Metrika counter --><script type="text/javascript">(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter17133709 = new Ya.Metrika({id:17133709, enableAll: true, webvisor:true}); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="//mc.yandex.ru/watch/17133709" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter -->
</body>
</html>

2

Re: Некорректное отображение шаблона dle 9.7 в IE

Версия "ослёнка" случаем не 6.0? smile

(какая версия браузера IE)

3 (27.09.2012 20:19 отредактировано Alkuuzz)

Re: Некорректное отображение шаблона dle 9.7 в IE

Такое на всех версиях, но отображает немного по разному..

Добавлено: 27-09-2012 22:59:53

Изменял DOCTYPE, удалось уменьшить степень кривизны немножко... У кого-нибудь есть идеи?

Re: Некорректное отображение шаблона dle 9.7 в IE

Я не уверен, что в шаблоне все правильно в плане подключения огромного количества JS и CSS - скорее всего они друг с другом конфликтуют.
Вот например:

<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
<link media="screen" href="{THEME}/style/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/style/js/libs.js"></script>

Нет ли здесь дублирования?

5

Re: Некорректное отображение шаблона dle 9.7 в IE

Врятли в нем все может быть правильно. Рипнут с джумлы, затем адаптирован с 9.5 до 9.6. Но на dle 9.6 в IE все было нормально, а с 9.7 так почему-то..

admin пишет:

Нет ли здесь дублирования?

Исправил, ничего не изменилось.