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 » WordPress Themes » Atahualpa 3 Wordpress theme »

Menu bars displaying w/ diff heights in diff browsers


  #1  
Old Jul 18, 2014, 01:38 PM
Simeon
 
14 posts · Nov 2010
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?
Attached Thumbnails
Click image for larger version

Name:	Menu-Bar-Heights-Diff-in-Various-Browsers.jpg
Views:	1567
Size:	16.6 KB
ID:	2581  
  #2  
Old Jul 18, 2014, 02:39 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
That's something you will need to use a code inspector for and play with the CSS. Can tell much with screen shots.
__________________
~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 Jul 18, 2014, 05:24 PM
Simeon
 
14 posts · Nov 2010
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.
  #4  
Old Jul 18, 2014, 06:19 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, 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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jul 19, 2014, 06:09 AM
Simeon
 
14 posts · Nov 2010
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?
  #6  
Old Jul 19, 2014, 06:47 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
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?
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.
Quote:
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?
That's what it looks like.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Jul 19, 2014, 09:17 AM
Simeon
 
14 posts · Nov 2010
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!

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
menu bar and link area: different heights jcpcosta Header configuration & styling 14 Apr 24, 2013 10:47 AM
Menus displaying differently in browsers Webunet Page & Category Menu Bars 6 Jul 7, 2012 08:43 AM
Having Trouble Displaying Across browsers rdeschene Atahualpa 3 Wordpress theme 5 Oct 17, 2010 05:03 AM
Diff Header Image Per Page? CondoAnalysis Header configuration & styling 3 Mar 19, 2009 03:59 AM
Theme not displaying properly in all browsers tepper Atahualpa 3 Wordpress theme 1 Feb 17, 2009 06:51 PM


All times are GMT -6. The time now is 12:15 PM.


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