There is an article on A List Apart that has something like that, not sure if you have seen that one. http://www.alistapart.com/articles/customcorners/
But I guess this has html meddling... Tim Hill Computer Associates Graphic Artist tel: +612 9937 0792 fax: +612 9937 0546 [EMAIL PROTECTED] -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of JW Sent: Thursday, 9 September 2004 6:58 AM To: Mailing List :: WSG | CSS Subject: [WSG] Better Flexible Rounded Corners Option? and Site Check Hi I am looking for a flexible rounded corners (with borders) that is not restrictive to size. Googled for some but most are filled with lots of complex solutions (lots of html meddling and tones of css codes). Did anyone come across something good? Right now this page - http://design.sodesires.com/tictap/ - I am working on is using a fix width image (top bit and bottom bit image using css for side borders). Not the best solution as my width is fixed...Just temporary markup for me to look at the site. In IE, if you hover over menu, the side borders will disappear. It looks ok upon loading or refresh of page. I have no idea why this is happening. Perhaps someone knows? I have checked the site in Win-IE5-6, Firefox and Opera 7. Can any Mac users kindly help me to check it in IE 5? CSS Markup for Rounded Corners: #corners-mainT, #corners-mainB {float: left; width: 660px;} #corners-mainT {background: #FFFFFF url(../../../images/global/corners/main-T.gif) no-repeat left top;} #corners-mainB {background: url(../../../images/global/corners/main-B.gif) no-repeat left bottom;} #corners-main { border-right: 3px solid #DBD7BD; border-left: 3px solid #DBD7BD; margin: 15px 0px; padding: 5px 0px 0px; } CSS Markup for Rounded Corners' Content (if it helps to give a better overview): #step-one, #step-two, #step-three {width: 173px; padding-top: 180px; padding-left: 15px;} #step-one {background: url(../../../images/home/step-1.gif) no-repeat;} #step-two {background: url(../../../images/home/step-2.gif) no-repeat;} #step-three {background: url(../../../images/home/step-3.gif) no-repeat;} #steps li {font-size: 0.9em; color: #5F4A3F; float: left;margin-left: 25px;} * html #steps li {margin-left: 22px; ma\rgin-left: 17px;} /* IE6-win has larger padding than IE5-win */ HTML Markups: <div id="corners-mainT"><div id="corners-mainB"><div id="corners-main"> <ul id="steps"> <li id="step-one">content here</li> <li id="step-two">content here</li <li id="step-three">content here</li> </ul> <div class="divClear"> </div> </div></div></div> With Regards - Jaime ****************************************************** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
