Hi Forum Friends!

I could use a fresh set of eyes looking at some CSS for site under development.

Take a look at the menu here: http://eolhealth.server308.com/. This is ATA 367 and I've been looking at it in FF.

Things I want to change:
1. There is about 1px of orange showing above the menu background graphic (the goal is to have the light yellow be seamless to the header image). I think what is happening here has something to do with how I inserted the page border on the #wrapper. I think it might be filling the entire page space with the dotted background instead of just the border. Suggestions?)

2. There is an orange dotted line showing under the menu background graphic (again, the goal is to have the white be seamless to the white page background). This I think is coming from the default dashed border around menu items? I thought I made these transparent in the CSS, but....I guess not.

3. I used padding to lower the text into the center of the menu background graphic, but when an item is rolled over, the background color covers the image. Again, I thought I made this transparent in the CSS.

This is what is loaded in:

div#menu1 ul {
background: url(/wp-content/themes/atahualpa367/images/background-menu.png) repeat-x !important;
}
div#menu1 ul.rMenu li {

margin: 0px;
padding-top: 18px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 18px;
background:transparent; !important;
width:83px;
font-weight:900;
}
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:active {
border-bottom:1px solid transparent; !important;
border-left:1px solid transparent; !important;
border-right:1px solid transparent; !important;
border-top:1px solid transparent; !important;
border-style:solid;
background:transparent; !important;
}
div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:active {
border-bottom:1px solid transparent; !important;
border-left:1px solid transparent; !important;
border-right:1px solid transparent; !important;
border-top:1px solid transparent; !important;
border-style:solid;
background:transparent; !important;
}



div#wrapper {
padding: 15px;
background: url(/wp-content/themes/atahualpa367/images/border-square.png);
}

Thanks for your help!
-Kimberly

1) not sure what you mean

2) if you mean this line

that is part of the background image 'background-menu.png'

3) try changingthis CSS

div#menu1 ul.rMenu li:hover, div#menu1 ul.rMenu li.sfhover {
    background: none repeat scroll 0 0 #ECAD4F;
}

which comes from the page_menu_bar_background_color_parent