Поддержка Проблемы и решения Проблема с отображением кнопок меню

  • Возникла проблема с отображением кнопок меню (точнее эффекта hover при наведении курсора) в браузерах: Opera, Chrome, Safari — (ну об Internet Explorer вообще молчу :))
    В Mozilla Firefox работает все отлично.
    ПОДСКАЖИТЕ ПОЖАЛУСТА РЕШЕНИЕ
    Это скрипт CSS который использую:

    div#menu1 {
    background-image: transparent !important;
    padding:0;
    margin-left:435px;
    }
    #menu1 ul.rMenu li a {
    display: block;
    color: #390E03 !important;
    border-radius: 18px !important;
    background-color: transparent !important;
    margin: 3px 4px 2px 4px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    height: 21px !important;
    line-height: 21px !important;
    text-shadow: 0 1px 0 #D5AD8A !important;
    }
    div#menu1 ul.rMenu {
    background: transparent !important;
    }
    #rmenu2 .page_item {
    background: transparent !important;
    margin-right: 5px !important;
    }
    div#menu1 ul.rMenu li a:hover {
    color: #ffffff !important;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 0 0;
    background-size: auto auto;
    background-image: -moz-linear-gradient(center top , #381A0D 0%, rgba(56, 26, 13, 0.8) 10%, rgba(56, 26, 13, 0.2) 100%) !important;
    background-repeat: repeat;
    border-bottom-color: #D5A25C;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    text-shadow: 0 1px 1px #000000 !important;
    }

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • А в чем проблема? Как должно быть и что происходит не верно?

    Предположу, что дело в этом значении свойства background-image: -moz-linear-gradient(center top , #381A0D 0%, rgba(56, 26, 13, 0.8) 10%, rgba(56, 26, 13, 0.2) 100%) !important;. Суть в том, что это свойство, судя по вендорному префиксу как раз для FF, т.е. для других браузеров не будет задан фоновый градиент.

    Варианты решения:

    1. Задать background-image: изображением градиента.
    2. Прописать стили с использованием всех необходимых префиксов.

    Да, туплю не указал адрес своего тестового сайта, что бы было видно что к чему. Вот мой тестовый сайт http://miportfolio.orgfree.com/
    Дизайн кнопок взял здесь http://www.slidedeck.com/ с помощью Firebug. На этом сайте работает во всех браузерах с этим кодом -moz-linear-gradient(center top , #381A0D 0%, rgba(56, 26, 13, 0.8) 10%, rgba(56, 26, 13, 0.2) 100%) !important;

    Не могу понять почему у меня не работает, перепробовал все что знаю !!!!

    Вы вновь не даете пояснений что именно должно быть и что получается по факту. Этот префикс, возможно, и не имеет отношения к проблеме, вероятно, что какой-то js-скрипт генерит нужные стили дополнительно, тогда, простого копирования стилей не достаточно.

    Еще раз, ввиду того, что Вы не описали суть проблемы, я предположил очевидное, в чем именно проблема можно сказать только тогда, когда Вы сообщите в чем именно она выражается!

    Если не затруднит откройте ссылку в Mozilla Firefox и наведите на кнопки.
    И в Opera или Chrome так будет понятней и наглядно.

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

    background: #381a0d;
        background: -moz-linear-gradient(top,  rgba(56,26,13,1) 0%, rgba(56,26,13,0.8) 10%, rgba(56,26,13,0.2) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(56,26,13,1)), color-stop(10%,rgba(56,26,13,0.8)), color-stop(100%,rgba(56,26,13,0.2))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(56,26,13,1) 0%,rgba(56,26,13,0.8) 10%,rgba(56,26,13,0.2) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(56,26,13,1) 0%,rgba(56,26,13,0.8) 10%,rgba(56,26,13,0.2) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(56,26,13,1) 0%,rgba(56,26,13,0.8) 10%,rgba(56,26,13,0.2) 100%); /* IE10+ */
        background: linear-gradient(top,  rgba(56,26,13,1) 0%,rgba(56,26,13,0.8) 10%,rgba(56,26,13,0.2) 100%); /* W3C */

    Строка 48 файла home.css.

    О чудо — спасибочки, спасибочки и респект.
    P.S. Нужно учится работать с Firebug.
    Забыл открыть в новой вкладке, а полез в кнопку CSS а там последнего кода не было.

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • Тема «Проблема с отображением кнопок меню» закрыта для новых ответов.