Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Need help with transparency in menu css (http://forum.bytesforall.com/showthread.php?t=17504)

blueprairie May 8, 2012 03:43 PM

Need help with transparency in menu css
 
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

juggledad May 8, 2012 04:41 PM

1 Attachment(s)
1) not sure what you mean

2) if you mean this line
Attachment 1867
that is part of the background image 'background-menu.png'

3) try changingthis CSS
HTML Code:

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


All times are GMT -6. The time now is 02:58 PM.

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