I have followed the helpful info in this forum on how to make the site header appear to run across the entire screen with a narrower site layout -- by using a top-left background image matched to the header (inserted at ATO > Body, Text & Links):
Code:
background: #111111 url(http://www.xxxxxx.com/wp-content/uploads/2013/03/Layout-Background-top-left-corner-500px-wide.jpg) repeat-x top left;
I have aligned the background image exactly to the Header area (in all browsers except IE and Safari), by setting the height of the logo/header area and the margins around the menu bar.
However, in Internet Explorer & Safari only, I need to add 1px more of padding-bottom to the page menu bar, in order to make it align perfectly to the background image.
How can I add 1px of padding-bottom to the page menu bar in a way that will affect only IE and Safari?
(Note: The background image and header area do align perfectly in ALL browsers if I set a fixed height for both the logo/header area and the menu bar, rather than using margins or padding for the menu bar. However, with a fixed height for the menu bar, the menu items wrap against the bottom menu bar border on mobile devices, which looks distorted. By using margins and padding rather than a fixed height for the menu bar, it wraps more normally - inside the menu bar borders - on mobile devices).
Any help or suggestions will be much appreciated. (I will send a PM with the URL to both of you, Juggledad and Larry.)
Many thanks!
