Rounded Corners

[jasonbwhitman 0]

I have read through as many posts as I can about this topic, have tried the solutions recommended, and still cannot get this to work. My site is http://www.parkcountygop.com Here is the code I am using in the Custom CSS box:

#primary-nav{background:#ffffff;-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;border-top-right:10px;border-top-left-radius:10px;padding-top:10px;}
	#branding{background:transparent !important;}
	#header{background:transparent !important;}
	#page-main{background:#ffffff;}
	#page-canvas{background:transparent !important;}
	#primary-nav .texture {background-color:transparent !impo

[makeylon 0]

Your code will only work in FireFox browser. IE does not have an easy way to create rounded corners and cannot read the radius controls. Otherwise, what are you trying to accomplish? With your nav background color the same as the page background color, rounding the corners won't show up anyway. But a quick test change of color shows that the nav bar is rounding in firefox, at 10 pixels, which is not a large rounding. But it is working as written.

[bryan-hadaway 3]

Thanks Mark, that is correct. More info here: http://www.css3.info/preview/ on all sorts of CSS3 goodies. Thanks, Bryan

[jasonbwhitman 0]

OK, so if I understand Mark correctly, CSS3 support for rounded corners is only implemented properly in FireFox? Am I understanding you Mark? What I am trying to accomplish is to have the corners of the white page background be rounded as is my logo image. Is that not possible to do in a cross-browser fashion? (I am not a CSS3 expert) Thank you again

[Kate 3]

Hi Jason - With CSS alone, it won't work in IE. (However, in other compliant browsers like Safari, Chrome, and Opera it should work just fine Here are a couple of links you may find helpful: http://www.css3.info/preview/rounded-border/ http://davidwalsh.name/rounded-corners-ie

[makeylon 0]

Try this (add it to custom-css in settings): #page-main { -moz-border-radius: 1em; -webkit-border-radius: 1em; } This should work except for IE. Primarily it should work for FF, Safari and Chrome. IE requires a much more painful fix (I usually ignore it because square corners in IE is something I put up with rather than trying to force IE to do what every other browser should do).

[jasonbwhitman 0]

Try this (add it to custom-css in settings): #page-main { -moz-border-radius: 1em; -webkit-border-radius: 1em; } This should work except for IE. Primarily it should work for FF, Safari and Chrome. IE requires a much more painful fix (I usually ignore it because square corners in IE is something I put up with rather than trying to force IE to do what every other browser should do).

Thank you for the suggestion. I upgraded to the newest version of platform pro and inserted the settings you recommended and still no success. I am using Chrome and FireFox. My Website

[kastelic 6]

Youve almost certainly got several overlapping elements taking up the same space so you have to target them all, for example the header div,