Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » Forum Usage » Forum How-To »

How to add 1px of padding-bottom to Page Menu Bar in IE & Safari Only

Prev Previous Post   Next Post Next
Old Mar 26, 2013, 10:40 AM
New WordPress Fan
141 posts · Jul 2010
How to add 1px of padding-bottom to Page Menu Bar in IE & Safari Only

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!


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
center column padding top and bottom DanDan Center area post/pages 8 Jan 21, 2013 08:31 PM
General CSS question -- Safari 4 adding weird padding bswb97 Atahualpa 3 Wordpress theme 1 May 1, 2012 09:13 PM
help - howto remove bottom padding of page/post ? chjan Atahualpa 3 Wordpress theme 6 Apr 6, 2011 08:29 AM
[SOLVED] Center Column and Sidebars no top padding in Safari Whatsthatcat? Atahualpa 3 Wordpress theme 2 May 3, 2010 10:54 PM

All times are GMT -6. The time now is 04:14 PM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.