Using Atahualpa 3.7.10 with WordPress 3.5.1.

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):

background: #111111 url(http://www.xxxxxx.com/wp-content/uploads/2013/03/Layout-Background-top-left-corner-500px-wide.jpg) repeat-x top left;

(The layout of the Header area is set at: %logo %page-center %bar1 %bar2.)

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!

Update: I have found a work-around: By shortening one of the page names to make the menu content shorter, it now does not wrap even on mobile devices.

Then we can use a fixed page menu bar height (along with the fixed header height) to align the site to the top-left background image exactly in all browsers.

But, for future reference, I would still greatly appreciate any tips on how to set padding separately for IE and Safari.

Many thanks!

I played around a bit and what I would do is set many of the backgrounds to transparent so the background image shows through. You need to set the horbar backgrounds and borders to transparent and none and put a transparent background on #container. You will also have to add a bottom margin to the menu to push the image down a bit as well.

I THINK that is about it but there are many interrelated items.

Nice design by the way.

Thank you, lmilesw! Very clever! I would not have thought of that.

Many thanks!

One further question: Is there a way to add CSS inserts that will be read only on mobile devices, and for mobile devices, supersede any other inconsistent CSS code?

For example, I'd like computers to read the following code:

div#menu1 {
height: 36px;
padding-top: 8px;
}

But, all mobile devices to read the following code instead:

div#menu1 {
margin-top: 8px;
padding-top: 8px;
margin-bottom: 8px;
}

Is there a way to do that at CSS Inserts? Designate some code only for mobile devices and to prevail for mobile devices?

Many thanks!

try a google search with 'css for mobile only'