Wordpress Themes - WP Forum at BFA - Menu bar fine in IE, misaligned in Firefox?

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - Menu bar fine in IE, misaligned in Firefox? (http://forum.bytesforall.com/showthread.php?t=15986)

Menu bar fine in IE, misaligned in Firefox?

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?

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.

Hi There,

Seems difficult to do if it works in IE but not in Firefox. How do you make something browser specific?

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.

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.

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;

}

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?

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.

You could also try em instead of px for the font size and perhaps a transparent background on the menu.

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 (Post 76818)

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...

Just curious... What version of IE are you using? I haven't had to play with hacks in awhile.