не работают стили CSS

[AnGera]

Доброго времени суток!

Уважаемые форумчане, столкнулся с такой проблемой. Для своей темы шаблона магазина сделал выпадающее вертикальное меню. В модулях /Текстовый блок - HTML/ написал код html(вертикальное меню), с подключением стилей. Но к сожалению, данные стили работают только в Firefox, но почему-то в Google Chrome данные стили не работают и вовсе. Подскажите пожалуйста в чем проблема и как можно ее решить.

Опенкарт Version 2.3.0.2 (trs-2.3.0.2)

 

Заранее благодарен за ответы!

[destreser]

Дайте больше информации - код, скриншоты, ссылки. По вашему описанию мало что можно сказать.

[AnGera]

Есть такой модуль в текстовом блоке, в котором прописан код 

 

<ul class="menu_left" style="list-style: none;">
    <li class="menu_left-item" style="margin-bottom:1rem;"><a href="http://reflex-studio.ru/новинки">НОВИНКИ</a></li>
    <li class="menu_left-item">ЖЕНСКОЕ</li><li class="menu_left-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;<a href="http://reflex-studio.ru/топы" style="background-color: rgb(255, 255, 255);">Топы</a></li><li class="menu_left-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://reflex-studio.ru/футболки" style="background-color: rgb(255, 255, 255);">Футболки</a></li><li class="menu_left-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://reflex-studio.ru/Лонгсливы_водолазки" style="background-color: rgb(255, 255, 255);">Лонгсливы, водолазки</a><ul class="menu_left" style="list-style: none;">
            <li class="menu_left-item"><a href="http://reflex-studio.ru/лосины_бриджи">Лосины, Бриджи</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/толстовки_худи">Толстовки, худи</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/брюки_шорты">Брюки, Шорты</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/костюмы-женские">Костюмы</a></li> 
            <li class="menu_left-item"><a href="http://reflex-studio.ru/платья">Платья</a></li> 
            <li class="menu_left-item"><a href="http://reflex-studio.ru/туники-домашние">Туники домашние</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/платья-домашние">Платья домашние</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/костюмы-домашние">Костюмы домашние</a></li>
            <li class="menu_left-item">ДЛЯ КОРМЯЩИХ МАМ
                <ul class="menu_left" style="list-style: none;">
                    <li class="menu_left-item"><a href="http://reflex-studio.ru/топы_для_кормящих">Топы</a></li>
                    <li class="menu_left-item"><a href="http://reflex-studio.ru/футболки_для_кормящих">Футболки</a></li>
                    <li class="menu_left-item"><a href="http://reflex-studio.ru/Лонгсливы_водолазки_для_кормящих">Лонгсливы, водолазки</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="menu_left-item">МУЖСКОЕ
        <ul class="menu_left" style="list-style: none;">
            <li class="menu_left-item"><a href="http://reflex-studio.ru/футболки-мужские">Футболки</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/толстовки-мужские">Толстовки, худи</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/брюки-мужские">Брюки, шорты</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/костюмы-мужские">Костюмы</a></li>
        </ul>
    </li>
    <li class="menu_left-item">ДЕТСКОЕ
        <ul class="menu_left" style="list-style: none;">
            <li class="menu_left-item"><a href="http://reflex-studio.ru/футболки-детские">Футболки</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/толстовки-детские">Толстовки, худи</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/брюки-детские">Брюки, шорты</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/костюмы-детские">Костюмы</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/платья-детские">Платья</a></li>
        </ul>
    </li>
    <li class="menu_left-item"><a href="http://reflex-studio.ru/распродажа">РАСПРОДАЖА</a></li>
    <li class="menu_left-item"><a href="http://reflex-studio.ru/пряжа_трикотажная">ПРЯЖА ТРИКОТАЖНАЯ</a></li>
</ul>    

////////////////////////////////////////////////////////////////

 

Данный код не совсем меня устраивает. Написал другой:

 

<div class="navigation">
  <ul>
    <li><a href="http://reflex-studio.ru/новинки">Новинки</a></li>
    <li class="has-sub"> <a href="#">Женское</a>
      <ul>
        <li><a href="http://reflex-studio.ru/топы">Топы</a></li>
        <li><a href="http://reflex-studio.ru/футболки">Футболки</a></li>
        <li><a href="http://reflex-studio.ru/Лонгсливы_водолазки">Лонгсливы / водолазки</a>
        <li><a href="http://reflex-studio.ru/лосины_бриджи">Лосины / Бриджи</a></li>
        <li><a href="http://reflex-studio.ru/толстовки_худи">Толстовки / худи</a></li>
        <li><a href="http://reflex-studio.ru/брюки_шорты">Брюки / Шорты</a></li>
        <li><a href="http://reflex-studio.ru/костюмы-женские">Костюмы</a></li> 
        <li><a href="http://reflex-studio.ru/платья">Платья</a></li> 
        <li><a href="http://reflex-studio.ru/туники-домашние">Туники домашние</a></li>
        <li><a href="http://reflex-studio.ru/платья-домашние">Платья домашние</a></li>
        <li><a href="http://reflex-studio.ru/костюмы-домашние">Костюмы домашние</a></li>
      </ul>
    </li>
    <li class="has-sub"> <a href="#">Для кормящих мам</a>
      <ul>
        <li><a href="http://reflex-studio.ru/топы_для_кормящих">Топы</a></li>
        <li><a href="http://reflex-studio.ru/футболки_для_кормящих">Футболки</a></li>
        <li><a href="http://reflex-studio.ru/Лонгсливы_водолазки_для_кормящих">Лонгсливы / водолазки</a></li>
      </ul>
    <li class="has-sub"> <a href="#">Мужское</a>
      <ul>
        <li><a href="http://reflex-studio.ru/футболки-мужские">Футболки</a></li>
        <li><a href="http://reflex-studio.ru/толстовки-мужские">Толстовки / худи</a></li>
        <li><a href="http://reflex-studio.ru/брюки-мужские">Брюки / шорты</a></li>
        <li><a href="http://reflex-studio.ru/костюмы-мужские">Костюмы</a></li>
      </ul>    
    </li>
    <li class="has-sub"> <a href="#">Детское</a>
      <ul>
        <li><a href="http://reflex-studio.ru/футболки-детские">Футболки</a></li>
        <li><a href="http://reflex-studio.ru/толстовки-детские">Толстовки / худи</a></li>
        <li><a href="http://reflex-studio.ru/брюки-детские">Брюки / шорты</a></li>
        <li><a href="http://reflex-studio.ru/костюмы-детские">Костюмы</a></li>
        <li><a href="http://reflex-studio.ru/платья-детские">Платья</a></li>
      </ul>    
    </li>
    <li><a href="http://reflex-studio.ru/распродажа">РАСПРОДАЖА</a></li>
    <li><a href="http://reflex-studio.ru/пряжа_трикотажная">ПРЯЖА ТРИКОТАЖНАЯ</a></li>
  </ul>
</div>

 

и прописал стили для него. 

Но к сожалению в Google Chrome они не работают.

Вот стили:

@charset "utf-8";
/* CSS Document */
@font-face {font-family: neuropol; src: url(/catalog/view/theme/reflex/stylesheet/neuropol.ttf); }
@import url "/catalog/view/theme/reflex/stylesheet/style1.css";

body {
    font-family: 'Open Sans', sans-serif;
}
.header {margin-top:3.1em;}
.navbar-fixed-top {
    background-color: white;
}
footer {
    font-size:.9em;
}
.blackline {
    background: #414141;
    height:.6em;
}
.card-outline-reflex {
    border-color: #F800FF !important;
    background-color: transparent;}

h1 {font-size:2em;}

a {color:#143546;}

.carousel-control {
    opacity: 0 !important;
}

.topmenu {box-shadow: 0 4px 4px rgba(0, 0, 0, 0.07);}
.main_menu a {
    text-decoration:none;
    color: #143546;
    letter-spacing: 1px;
    font-size: 0.7em;
}

#logo {font-family: neuropol;}
#logo a {
    text-decoration:none;
    color:#F800FF;
    font-size:3rem;
    letter-spacing:.1em;
    text-shadow: 0 1px 0 #ccc, 
                   0 2px 0 #c9c9c9,
                   0 3px 0 #bbb,
                   0 4px 0 #b9b9b9,
                   0 5px 0 #aaa,
                   0 6px 1px rgba(0,0,0,.1),
                   0 0 5px rgba(0,0,0,.1),
                   0 1px 3px rgba(0,0,0,.3),
                   0 3px 5px rgba(0,0,0,.2),
                   0 5px 10px rgba(0,0,0,.25),
                   0 10px 10px rgba(0,0,0,.2),
                   0 20px 20px rgba(0,0,0,.15);
}

.bg-faded {
    background-color: #f7f7f9;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.07);
}
.btn-info {
    background-color: #F800FF !important;
    border-color: #F800FF !important;
}
 .btn-link {
    color: #e91e63!important;
     text-shadow: 1px 1px 4px rgba(150, 150, 150, 0.60);
}
 .btn-link-header {
    font-size:.7em;
     color: black!important;
     text-shadow:none!important;
}
.form-control:focus {border-color: #F800FF !important;}

.menu {
    border:none !important;
    font-family: 'Open Sans', sans-serif;
    font-size:0.8em;
    letter-spacing: 1px;
}
.menu a:hover {
    text-decoration:none;
    color:#F800FF;
    text-shadow: 0 1px 0 #ccc;
}
.thumbnails {
    overflow: auto;
    clear: both;
    list-style: none;
    padding: 0;
    margin: 0;
}
.tab-content {
    background:#fff;
    padding:2em;
}
.price {
    font-size: 1em;
    font-weight: 700;
}

.card .list-group-item {border:none !important;}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    background-color: #F800FF !important;
    border-color: #F800FF !important;
}
.lead {
    font-size: 1.1rem !important;
}
.btn-success {
    background-color: #F800FF !important;
    border-color: #F800FF !important;
}

.card-block {
    padding: 0.1rem!important;
    font-size: .7rem;
}
.card-title {
    margin-bottom: .1rem!important;
}
.buy {
    font-size: 0.8em!important;
}
.btn-buy {
    padding: .2rem 1rem!important;
}
.card {
    border: none!important;
}
.img-thumbnail {
    border: none!important;
}

.color-line-two {
    height: .2em;
    background: linear-gradient(to right, #C877DB, #55CBD9, #70E1CF, #9ED178, #F4E47A, #D984B2, #7DC3DE, #CF98DE, #B6B6B6);
}
 .novinka_label {
    width: 72px;
    height: 30px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 0 0;
}
.nav-link {
    padding: .8em 1em!important;
}
.categorymenu {
    font-family: 'Open Sans', sans-serif;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing: 1px;
}

.menu_left-item li {
    list-style: none!important;
    margin-top: .9em;
    margin-bottom: .9em;
    margin-left: -2em;
}
.menu_left {
    font-size: 1rem;    
}
#uslov p {
    line-height: 1.2rem!important;
    margin-bottom: .6rem;
}
/*vertical_menu*/

.navigation {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  min-height: 0.05em;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}

.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul {
  top: 0;
  right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
  top: 0;
  left: 99%;
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; }

.navigation {
  width: 13em;
  background: #8474A1;
  font-family: 'roboto', Tahoma, Arial, sans-serif;
  zoom: 1;
}

.navigation:before {
  content: '';
  display: block;
}

.navigation:after {
  content: '';
  display: table;
  clear: both;
}

.navigation a {
  display: block;
  padding: 1em 1.3em;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 3px 3px 3px #29062F;
  border-bottom: 1px solid #29062F;
}

.navigation > ul { width: 13em; }

.navigation ul ul { width: 13em; }

.navigation > ul > li > a {
  border-right: 0.3em solid #CCA8D8;
  color: #ffffff;
}

.navigation > ul > li > a:hover { color: #ffffff; }

.navigation > ul > li a:hover,
.navigation > ul > li:hover a { 
  background: #CCA8D8;
  transition: 0.5s all;
  padding-left: 5px;
 }

.navigation li { position: relative; }

.navigation ul li.has-sub > a:after {
  content: '+';
  position: absolute;
  right: 1em;
}

.navigation ul li.has-sub:hover > a:after {
  transform: rotate(135deg);
}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}

.navigation ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.navigation ul ul { border: 1px solid #CCA8D8; }

.navigation ul ul a { color: #ffffff; }

.navigation ul ul a:hover { 
  color: #ffffff; 
  transition:: 0.5s;
  
}

.navigation ul ul li { border-bottom: 1px solid #CCA8D8; }

.navigation ul ul li:hover > a {
  background: #08979D;
  color: #ffffff;
  padding-left: 10px;
  transition:: 0.5s;
}

.navigation.align-right > ul > li > a {
  border-left: 0.3em solid #CCA8D8;
  border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

@media (max-width: 420px){
.navigation ul ul {
  top: 0;
  left: 45%;
}
}

@media (max-width: 270px) {
.navigation ul ul {
  top: 0;
  left: 18%;
}
}

@media (max-width: 575px){

    .fixed-top {position:relative!important;}
    .fixed-bottom {position:relative!important;}
    .header {margin-top: .1em;}
    .phonenumber {
        margin: 1em;
        font-size: 0.9rem;
    }
    #logo a {
        font-size: 2rem;
        font-family: neuropol;
    }
    p.table {
        font-size: 0.7rem!important;
    }
}
@media (min-width: 576px) and (max-width: 767px){

    .fixed-top {
        position:relative!important;
    }
    .header {margin-top: .1em;}
    .phonenumber {
        margin: 1em;
        font-size: 0.9rem;
    }
    .fixed-bottom {position:relative!important;}
    #logo a {
        font-size: 2.5rem;
        font-family: neuropol;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body {
    margin-bottom: 3rem!important;
}
}

@media (min-width: 992px) and (max-width: 1139px) {
    body {
    margin-bottom: 3rem!important;
}
}

@media (min-width: 1140px) and (max-width: 1599px) {
    body {
    margin-bottom: 3rem!important;
}
}
@media (min-width: 1600px) {
    body {
    margin-bottom: 3rem!important;
}
}

 

И данные стили работают только в Firefox

 

[destreser]

В каком именно файле вы сохранили стили? как вы эти стили подключаете?

[AnGera]

стили сохранены в /catalog/view/theme/reflex(свой шаблон)/stylesheet/style.css

Как он подключается и где, к сожалению  не знаю. Я просто внес дополнительные стили в уже существующий подключенный файл .css

[stickpro]

в fitefox у вас кэш остался, не понятно куда вы подключили стили

[AnGera]

А в каком обычно файле идет подключение стилей? Кэш не остается в  Фаере, проверял уже несколько раз. Как отключаю дополненные стили и ставлю старый код HTML на место, работает по прежнему, а с новым кодом html и дополнеными стилями, не хочет работать. Хотя обычный html со стилями запускает менюшку в любом браузере. Я так думаю, что где-то проблема в теме шаблона. А понять не могу.( мало опыта.

[destreser]

@AnGera , меню - вот это? http://prntscr.com/nl68us

Для этого меню у вас аж два правила есть в стилях - http://prntscr.com/nl698s

Внешнему виду со скриншота взяться неоткуда.

 

Разберитесь куда делись остальные css-правила. А то, что у вас что-то там в фаерфоксе отображалось - это кеш, как сказали выше.

[AnGera]

Может я не совсем правильно выразился. Есть своя тема в модуле, в котором есть подмодуль "меню левое", расположенного в Текстовом блоке HTML http://prntscr.com/nl6q1f.

В данном меню прописан "кривой" код, который хочу полностью поменять через команду "CODE VIEW". 

Для этого кода прописаны стили расположенные /catalog/view/theme/reflex(свой шаблон)/stylesheet/style.css

Меняю код http://prntscr.com/nl6rer (красивое меню) http://prntscr.com/nl6rnk

и в том же файле стилей /catalog/view/theme/reflex(свой шаблон)/stylesheet/style.css

 дополняю стили для своего кода HTML http://prntscr.com/nl6t7t (ну и так далее).

В итоге в Firefoxe все работает корректно, а вот в Хроме и в Эксплорере нихрена не работает.

 

А как возвращаю все как было. Все браузеры показывают старый "кривой" код со своими стилями  /catalog/view/theme/reflex(свой шаблон)/stylesheet/style.css

 

Так вот я и не понимаю, почему Хром и т.п. мой код не принимает с заданными стилями, а Фаер нормально работает.

[AnGera]

Есть еще одно. Поиск у меня в магазине идет через Яндекс, не на моем сайте ищет, а через яндекс. http://prntscr.com/nl75qm

Почему так происходит, и как можно поправить чтобы поиск проходил в моем магазине?

 

Благодарен заранее!

[AnGera]

Кажеться нашел где идет подключение и тот кривой див. А также нашел где идет поиск через Яндекс.  Спасибо всем огромное за вашу помощь! Реально помогли.