Wordpress Themes - WP Forum at BFA - [SOLVED] My Menu Items Wont align with the menu bar..

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

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

- - [SOLVED] My Menu Items Wont align with the menu bar.. (http://forum.bytesforall.com/showthread.php?t=18154)

[SOLVED] My Menu Items Wont align with the menu bar..

Hi all,

I have a new problem:

My menu items are set to the same size as the menu bar they're in but it seems like there is a 1px offset down and right for some reason. I cannot get it to be exactly aligned with the menu bar.

Any advice would be appreciated..

This is what I have in my css inserts with regard to the page menu:

HTML Code:

/*=========================*/

/* Page Menu Styling       */

/*=========================*/



.rMenu { background-color: transparent !important;}



div#menu1 { 

        height: 30px;  

        margin-top:0px; 

        background: url('/wp-content/themes/atahualpa/images/pagemenu-background.png') !important

}



ul.rMenu li a:link, 

ul.rMenu li a:visited, 

ul.rMenu li a:hover, 

/*ul.rMenu li a:active,*/ 

ul.rMenu li {

        height: 30px;

        background: url("/wp-content/themes/atahualpa/images/pageitem-background-repeat.png") repeat-x;

        background-color: transparent !important; 

        

}

Look in the menu section of the theme options. There is a section in there that talks about what you issue may be.

Hi Larry,

You mean in ATO? Because the nearest to my problem I see there it the border options and I have played around with those a lot and have not found a solution there.

Another question that could go in this thread:

How is the height of the menubar /items controlled? If I add inserts to specify the height, nothing changes really..

Thanks anyway.

OK I have found a solution:

First I removed the background image from the pageitems and made the bg color transparent so the pagemenu bar's background image shows through the items. This solved the horrible misalignment of the background images.

Then I went on to add a grooved right hand border to the menu items to create a nice looking divider between each item.

I ended up with this:

HTML Code:

.rMenu { background-color: transparent !important;}



div#menu1 { 

        height: 30px;  

        margin-top:0px; 

        background: url('/wp-content/themes/atahualpa/images/pagemenu-background.png') !important

}



ul.rMenu li a:link, 

ul.rMenu li a:visited, 

ul.rMenu li a:hover, 

/*ul.rMenu li a:active,*/ 

ul.rMenu li {

        height: 30px;

        repeat-x;*/

        background-color: transparent !important; 

        border-right: groove 2px #371d0b ;

}

To have a look at the results take a look at

GRE Industries

Use this temp login to review the site:

Username: temp
Password: temp1234

I think I am getting the hang of the rMenu system..

Cheers!