[SOLVED] Page menu item - vertical text alignment
I'm building a site using Atahualpa and all my resources are failing me on this one issue. All morning I've been looking through websites, books and this forum and trying code snippets, none of which work, so it's time to ask for help.
All I want is to move the text in the page menu down without moving the background color or image fill. Can someone please suggest some code to make this happen?
I thought I might add that property to the page menu item span class, but I haven't found the magic combination (i.e., css insert code) to make that happen. (Despite being smart, I find CSS easily confusing.)
Below is the code I already have and a screenshot of the menu as it is currently.
Code:
/* Page menu Container */
div#menu1 {
border-top: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
margin-top: 20px;
height: 43px;
text-align: center;
}
/* Page Menu items Area */
div#menu1 ul.rMenu {
margin-top: 1px;
border-top: 0px;
border-bottom: 0px;
}
/* Page Menu items themselves */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li {
width: 115px;
height: 35px;
border-left: solid 1px #ffffff;
border-right: solid 1px #ffffff;
margin-right: 10px;
}
/* Page menu items - background image on hover */
ul.rMenu li a:hover {
background: transparent url(http://michellemastersnlp.com/wp-content/uploads/2011/03/menubuttonhover.png) repeat-x scroll top left !important;
}
You can see that the current page is Home, and that Style Page is in the hover state. (Sorry I can't let the site be public right now.)
WP: 3.1
Atahualpa: 3.6.4
Browser: Firefox: 3.6.15
Mac OS X
THANK YOU!
