On my Joomla site I have a problem with the margin-top only in Google Chrome. Firefox & IE are ok. There are 27 pixels, the menu is above. I use a theme from Yootheme (but they are not able to solve the problem).
If I enter this style:
ul.menu.menu-dropline {
margin-top:27px;
}
Google Chrome version is ok; but not Firefox & IE anymore.
Unfortunately I am not the CSS profi - hopefully you can help.
Kind regards winfo
I found these lines in your CSS code. Probably they cause the difference in behavior between FF and Webkit browsers.
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
Quick solution: Add the following to your CSS code.
ul.menu.menu-dropline {
-webkit-margin-before: 27px;
}
The code is a bit strange. You have a few things that doesn't make much sense.
You have on your nav wrapper #menubar a margin-top set for 27 pixels on custom.css then in the same file, another negative margin-top value for your nav element of -20 pixels.
You should remove those two attributes and/or rules:
#menu {
margin-top: -20px;
}
#headerbar + #menubar {
margin-top: -27px;
}