Wordpress Themes - WP Forum at BFA - [SOLVED] Page menu bar rounded corners CSS issue

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] Page menu bar rounded corners CSS issue (http://forum.bytesforall.com/showthread.php?t=7686)

[SOLVED] Page menu bar rounded corners CSS issue

I'm trying to round the bottom-left and bottom-right corners of the page menu bar.

I have tried the following CSS inserts yet all I seem to be able to round is the menu bar behind the buttons themselves. Can anyone help me construct the CSS insert I need?

Atahualpa 3.5.1. on this website:
http://bit.ly/bSYEA7

Code:

div#menu1 {

/* bottom left */

-moz-border-radius-bottomleft: 10px;

-khtml-border-bottom-left-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

border-bottom-left-radius: 10px;

/* bottom right */

-moz-border-radius-bottomright: 10px;

-khtml-border-bottom-right-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

border-bottom-right-radius: 10px;

}

and

Code:

ul#rmenu2.clearfix.rMenu-hor.rMenu{

/* bottom left */

-moz-border-radius-bottomleft: 10px;

-khtml-border-bottom-left-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

border-bottom-left-radius: 10px;

/* bottom right */

-moz-border-radius-bottomright: 10px;

-khtml-border-bottom-right-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

border-bottom-right-radius: 10px;

}

"Ah, what tangled web's we weave, when first we practice to...mess with the menu's"
(apologies to Sir Walter Scott)

The menus remind me of the russian doll toy, layers inside layers inside layers. With

HTML Code:

div#menu1 {

margin-bottom:30px;

border:solid 3px #red;

-moz-border-radius-bottomleft:10px;

-khtml-border-bottom-left-radius:10px;

-webkit-border-bottom-left-radius:10px;

border-bottom-left-radius:10px;

-moz-border-radius-bottomright:10px;

-khtml-border-bottom-right-radius:10px;

-webkit-border-bottom-right-radius:10px;

border-bottom-right-radius:10px

}

you set the border for the DIV 'Menu1', but what about the rest of the layers? If you add

HTML Code:

div#menu1 ul.rMenu {

border:solid 0px #blue !important;

-moz-border-radius-bottomleft:10px;

-khtml-border-bottom-left-radius:10px;

-webkit-border-bottom-left-radius:10px;

border-bottom-left-radius:10px;

-moz-border-radius-bottomright:10px;

-khtml-border-bottom-right-radius:10px;

-webkit-border-bottom-right-radius:10px;

border-bottom-right-radius:30px

}

you will set the rounded borders for the UL that is in the DIV, but more is needed

HTML Code:

div#menu1 ul.rMenu li {

-moz-border-radius-bottomleft:10px;

-khtml-border-bottom-left-radius:10px;

-webkit-border-bottom-left-radius:10px;

border-bottom-left-radius:10px;

-moz-border-radius-bottomright:10px;

-khtml-border-bottom-right-radius:10px;

-webkit-border-bottom-right-radius:10px;

border-bottom-right-radius:10px

}

set's it for the LI that's in the UL that is in the DIV, but yes, you still need more. Using

HTML Code:

div#menu1 ul.rMenu li a:link,div#menu1 ul.rMenu li a:hover,div#menu1 ul.rMenu li a:visited,div#menu1 ul.rMenu li a:active {

boxrder:solid 2px green !important;

padding:8px 35px;

background:#EEEEEE !important;

font-weight:bold;

-moz-border-radius-bottomleft:10px;

-khtml-border-bottom-left-radius:10px;

-webkit-border-bottom-left-radius:10px;

border-bottom-left-radius:10px;

-moz-border-radius-bottomright:10px;

-khtml-border-bottom-right-radius:10px;

-webkit-border-bottom-right-radius:10px;

border-bottom-right-radius:10pxx

}

will add the corners to the <A> that is in the <LI> that is in the <UL> that is in the <DIV>

(if you use this exactly, you will need to clean up the colors and maybe some other things, but this should get you going)

btw you could combine them all with

HTML Code:

div#menu1,

div#menu1 ul.rMenu, 

div#menu1 ul.rMenu li,

div#menu1 ul.rMenu li a:link,

div#menu1 ul.rMenu li a:hover,

div#menu1 ul.rMenu li a:visited,

div#menu1 ul.rMenu li a:active {

-moz-border-radius-bottomleft:10px;

-khtml-border-bottom-left-radius:10px;

-webkit-border-bottom-left-radius:10px;

border-bottom-left-radius:10px;

-moz-border-radius-bottomright:10px;

-khtml-border-bottom-right-radius:10px;

-webkit-border-bottom-right-radius:10px;

border-bottom-right-radius:10px;

}

Thanks for your detailed explanation juggledad, hopefully my page menu bar frustrations will be reduced in the future. :)

I copied the last bit of code you provided and thankfully the menu bar corners are now rounded!

Yet there is a mysterious bunch of gray pixels at each corner that I'm not sure how to solve...:confused:

I think that is because the menu item is slightly smaller than the menu1 area, and both have the same curve so there is a little gap. Try changing one of the items to a smaller radius - that does mean breaking the CSS out...

Thanks juggledad.

I'll have some time to modify the CSS later tonight and I'll post again once I've properly spent the time needed (hopefully with success). :)

I broke down the CSS and played with the radius values to reduce the gap. I was not able to eliminate it completely -- so instead I just made the border on the menu bar 0px and that solved the issue.

:)