Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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


  #1  
Old Mar 26, 2013, 10:40 AM
New WordPress Fan
 
141 posts · Jul 2010
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):

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;
(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!
  #2  
Old Mar 26, 2013, 11:14 AM
New WordPress Fan
 
141 posts · Jul 2010
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!
  #3  
Old Mar 26, 2013, 11:33 AM
lmilesw's Avatar
lmilesw
 
10,173 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #4  
Old Mar 26, 2013, 11:40 AM
New WordPress Fan
 
141 posts · Jul 2010
Thank you, lmilesw! Very clever! I would not have thought of that.

Many thanks!
  #5  
Old Mar 26, 2013, 05:30 PM
New WordPress Fan
 
141 posts · Jul 2010
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:

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

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

Code:
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!
  #6  
Old Mar 26, 2013, 07:27 PM
juggledad's Avatar
juggledad
 
23,554 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try a google search with 'css for mobile only'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

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 09:35 PM.


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