Wordpress Themes - WP Forum at BFA - Header background problem in different browser?

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

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - Header background problem in different browser? (http://forum.bytesforall.com/showthread.php?t=14229)

kwilyan

May 19, 2011 07:30 AM

Header background problem in different browser?

I'm using 3.6.7 and latest wordpress version, and have a problem with this different look between browsers.

http://i51.tinypic.com/241vadi.png

This is normal look on Chrome, Opera, and even IE9.

But this is what shows for Firefox 4.

http://i51.tinypic.com/zl24p5.png
Currently using W3 Total Cache and Yoast SEO.

lmilesw

May 19, 2011 08:36 AM

It looks like how the 2px borders on the menu are rendered. For what you are trying to accomplish I would set all the backgrounds for the menus and header area to transparent and use a transparent png file for you banner image.

kwilyan

May 19, 2011 09:39 AM

It works. Thanks! :D

lmilesw

May 19, 2011 09:41 AM

It still looks the same to me.

kwilyan

May 19, 2011 11:32 AM

I'm very close to the final look, but the bottom corner of category menu shown at Firefox still irritate me. How do I solve it?

I tried this:

HTML Code:

div#menu1 ul.rMenu li.current_page_item a:visited,

div#menu1 ul.rMenu li a:link,

div#menu1 ul.rMenu li a:hover,

div#menu1 ul.rMenu li a:active {

height: 24px;

padding-top: 5px;

padding-left: 5px;

padding-right: 5px;

padding-bottom: 0px;

text-align: center;

align: center;

border-bottom:1px solid transparent;

border-left:1px solid transparent;

border-right:1px solid transparent;

border-top:1px solid transparent;

border-style:solid;

background:transparent !important;

}



div#menu1 ul.rMenu li.current_page_item a:visited,

div#menu1 ul.rMenu li a:hover {

background: transparent !important;

juggledad

May 19, 2011 11:44 AM

what is the url of the site and when you say

Quote:

the bottom corner of category menu shown at Firefox still irritate me.

would you like to explain how/why it irritates you? is the color wrong? is the text font wrong???

kwilyan

May 19, 2011 12:24 PM

the url is here:

Code:

http://www.kaorinusantara.web.id

It still bugs me because of this:

http://i54.tinypic.com/256y1pw.png
the second (category) line don't match with the background image

Your solution will be very appreciated ^^

juggledad

May 19, 2011 01:33 PM

So is your complaint that the width of the yellow in the background image is to short or the width of the menu bar is too tall?

lmilesw

May 19, 2011 01:42 PM

My initial thoughts are to eliminate your height declarations and use padding instead.

kwilyan

May 19, 2011 03:03 PM

Quote:

Originally Posted by juggledad (Post 65839)

So is your complaint that the width of the yellow in the background image is to short or the width of the menu bar is too tall?

I want the menu bar height to become same as the background image. It works for the upper bar, but I still don't know how to make it works for the lower bar.

Quote:

Originally Posted by lmilesw (Post 65841)

My initial thoughts are to eliminate your height declarations and use padding instead.

When I tried it, it only modified the upper bar. :confused:

lmilesw

May 19, 2011 03:50 PM

Could you export and attach your settings file (ATO>Export/Import settings) to a reply?

juggledad

May 19, 2011 06:47 PM

the height of the menu's is partially based on font height. The height of the entire header area is made up of the height of all the pieces.

Your issue is that you have a fixed background image and an adjustable height header (height of menu1 and the image and menu2)

Add to that that if someone makes their browser font larger is will change the heights and it will offset from the background image

The good news is that not that many people will really care. But you can spend lots of time ($$) getting it to look just right if you want.

So play with the font sizes and borders of menu 1 and then menu 2....or you could change the background image and never have to worry about it.

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