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 » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Menu bar fine in IE, misaligned in Firefox?


  #1  
Old Nov 16, 2011, 01:37 PM
aebrigham
 
35 posts · Aug 2009
Hi There,

Recently I upgraded Firefox to v8.0 and noticed some differences on my Menu Bars that span the screen from one side to another compared to how they used to and IE.

See attachement.

Why is this occuring and how can I fix this?
Attached Thumbnails
Click image for larger version

Name:	2011-11-16 3-31-30 PM.png
Views:	347
Size:	1.1 KB
ID:	1618  
  #2  
Old Nov 16, 2011, 01:54 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Those gray bars are a background image. Apparently some changes to Firefox changed something so you will have to fiddle with either the background image or the paddings/margins on the menu.
__________________
~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.
  #3  
Old Nov 17, 2011, 07:58 AM
aebrigham
 
35 posts · Aug 2009
Hi There,

Seems difficult to do if it works in IE but not in Firefox. How do you make something browser specific?
  #4  
Old Nov 17, 2011, 08:56 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Sometimes it requires adding CSS. For instance I sometimes have to add position: relative for some CSS to work in a particular browser. I wish I could give you a step by step but this is where I would be fiddling in Firebug to figure out the proper CSS. It might require some trial and error.
__________________
~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.
  #5  
Old Nov 30, 2011, 12:17 PM
aebrigham
 
35 posts · Aug 2009
I am still looking for a resolution to this issue...

I have done a bunch of searching on the net regarding this and haven't been successful.

Code:
background: #fff url('http://www.medeirosrmt.com/medeirosrmt/wp-content/themes/atahualpa371/images/background7.png') repeat-x top left;
Any help would be appreciated.
  #6  
Old Nov 30, 2011, 01:33 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Since I could see your site here is one solution that came from fiddling with the CSS. Just add it to ATO>Add HTML/CSS Inserts>CSS Inserts. It is very helpful to learn how to use Firebug and experiment in w3schools.com
HTML Code:
div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
    padding: 7px 15px !important;
}
__________________
~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.
  #7  
Old Dec 1, 2011, 08:02 AM
aebrigham
 
35 posts · Aug 2009
Hi There,

I tried your suggestion, and it worked to fix FireFox however, it intern made it appear incorrectly in IE. It is difficult to make them both appear correctly.

This is what I put... This works for IE.

Code:
div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 8px 15px !important;	
}
This works for FireFox

Code:
div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 7px 15px !important;	
}
How do I find a happy medium?
  #8  
Old Dec 1, 2011, 08:14 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the easy way to fix this is to get rid of the background image (ato->Body, Text & Links->Body Style)

the 'extension' of the bars is actually part of the background image. Because different browsers render the same font size differently, the height of the menu will be different making the menu height not match the background image (background7.png). You could try putting in some conditional CSS based of the browser and see if that would work (do a google search to see how to do that) or simple change the background image and forget about having the menubars look like they extend across the page.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Dec 1, 2011, 08:25 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You could also try em instead of px for the font size and perhaps a transparent background on the menu.
__________________
~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.
  #10  
Old Dec 1, 2011, 09:47 AM
aebrigham
 
35 posts · Aug 2009
Hi There,

I was able to resolve my issue. Although i am not happy with it 100%, it will do the trick for now and maybe someone else can make use of this. I am basically using a CSS Hack I guess.

Code:
div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 7px 15px;
padding: 8px 15px\9;
*padding: 8px 15px;
_padding: 8px 15px\9;
}
Quote:
Originally Posted by juggledad
the easy way to fix this is to get rid of the background image (ato->Body, Text & Links->Body Style)

the 'extension' of the bars is actually part of the background image. Because different browsers render the same font size differently, the height of the menu will be different making the menu height not match the background image (background7.png). You could try putting in some conditional CSS based of the browser and see if that would work (do a google search to see how to do that) or simple change the background image and forget about having the menubars look like they extend across the page.
  #11  
Old Dec 1, 2011, 09:51 AM
aebrigham
 
35 posts · Aug 2009
I just wanted to take the time to thank both of you for helping me with this issue. Thank-you for all your help. I appreciate your kindness...
  #12  
Old Dec 1, 2011, 10:10 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Just curious... What version of IE are you using? I haven't had to play with hacks in awhile.
__________________
~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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
website works fine in IE; BAD in Mozilla Firefox IDNewby Atahualpa 3 Wordpress theme 1 Feb 2, 2011 01:33 PM
[SOLVED] Table works fine in all browsers except Firefox. Please help! Nolie Center area post/pages 1 Nov 15, 2010 11:23 AM
Background won't load in IE8, but loads fine in Firefox ktaylor310 Header configuration & styling 6 May 6, 2010 01:36 PM
[SOLVED] RSS Feeds and Search box misaligned in IE, but not Safari or Firefox? thirstyreader Header configuration & styling 3 Apr 27, 2010 12:09 PM
Page menu bar - Firefox is is working fine - IE now retaining the settings gladiator Atahualpa 3 Wordpress theme 2 Aug 28, 2009 10:10 AM


All times are GMT -6. The time now is 11:33 AM.


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