Проблема с CSS - верхняя граница поля - Google Chrome

Question

На моем Joomla site У меня проблема с margin-top только в Google Chrome. Firefox & IE в порядке. Есть 27 пикселей, меню выше. Я использую тему из Yootheme (но они не могут решить проблему).

Если я ввожу этот стиль:

ul.menu.menu-dropline { 
    margin-top:27px; 
} 

Google Chrome версии нормально; но не Firefox & IE больше.

К сожалению, я не CSS profi - надеюсь, вы можете помочь.

Сердечные приветы winfo

Answer 1

Я нашел эти строки в коде CSS. Вероятно, они вызывают разницу в поведении между браузерами FF и Webkit.

-webkit-margin-before: 1em; 
-webkit-margin-after: 1em; 
-webkit-margin-start: 0px; 
-webkit-margin-end: 0px; 
-webkit-padding-start: 40px; 

Быстрое решение: Добавьте следующие строки в ваш код CSS.

ul.menu.menu-dropline { 
    -webkit-margin-before: 27px; 
} 

Answer 2

Код немного странный. У вас есть несколько вещей, которые не имеют большого смысла.

У вас есть на вашем nav обертке #menubar в margin-top набор для 27 точек на custom.css затем в том же файле, другой отрицательный margin-top значение для вашего nav элемента -20 пикселей.

Вы должны удалить этих двух атрибутов и/или правила:

#menu { 
    margin-top: -20px; 
} 

#headerbar + #menubar { 
    margin-top: -27px; 
}