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 »

Menu bars displaying w/ diff heights in diff browsers


  #1  
Old Jul 18, 2014, 12: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:	335
Size:	16.6 KB
ID:	2581  
  #2  
Old Jul 18, 2014, 01:39 PM
lmilesw's Avatar
lmilesw
 
10,174 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, 04: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, 05:19 PM
juggledad's Avatar
juggledad
 
23,655 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, 05: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, 05:47 AM
juggledad's Avatar
juggledad
 
23,655 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, 08: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

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


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


All times are GMT -6. The time now is 05:26 PM.


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