Menu bars displaying w/ diff heights in diff browsers
 

Atahualpa v3.7.12

If you look at attached screenshots you can see that the menu bars are displaying at different heights in the three main browsers. The screenshots are as follows in the attached compilation:

Top: Firefox

Middle: Internet Explorer

Bottom: Google Chrome

The R/L extensions of the menu are created by a background image which is a modified version of background7.png.

The height of the color bands in the image to R/L is consistent, it is the rendering of the height of the horizontal menu bar elements that varies.

Google Chrome renders them exactly the right height. FF and IE render them too high, and they are slightly different than each other as well.

Anyone have any suggestions how to get the menu bars to render out at the same height in all three browsers so it looks good for all users? :confused:

That's something you will need to use a code inspector for and play with the CSS. Can tell much with screen shots.

Thanks for the response, but this is not of much help to me because I have studied the css for many hours over a course of days trying everything under the sun to no avail.

It is also a known fact that different browsers can render the same css and html differently. I was hoping someone might know a hack to deal with this particular problem.

You can see the issue in the screenshots if you look just to the right of the search box.

You can also just go to innerpeace-worldpeace(dot)com using the FF or IE browsers and see it too.

It appears on both sides of the menu bars where the menu ends but the horizontal colored bars continue. They do not match up perfectly in FF and IE like they do in Chrome.

Your problen is indeed the fact that different browsers display the same font at different sizes. Now this wouldn't be aproblen except you have a BODY background image with the purple and blue lines and they are fixed no matter what the browser generates the height for the elements to be.

Now, if you were using Atahualpa version 3.7.15 you could probably do this using the 'Full Width Header' option and some CSS inserts and not worry about the BODY background image and then it would be correct for all browsers

Yes exactly, that is the problem. In mulling this over it is probably futile to try and control how the various browsers display the height of the menu bars due to slightly different rendering of fonts.

If I upgrade to 3.7.15 will all the custom settings I have in the ATA Theme Options panels be kept intact or will they be lost?

Also, is my thinking correct in that the background7.png image is tiling horizontally all the way across under where the menu links appear as well as to the R/L of the menus?

Atahualpa settings remain during upgrades - once you upgrade to 3.7.15 go to the HEADER, CENTER and Footer options and hit the SAVE button.
That's what it looks like.

Got creative for now and just re-designed that background image so it camouflages the problem! Will upgrade to latest version of ATA when I have more time s that always brings up unexpected issues to deal with!

Thanks for your help! :)