Hello all, I've been trying to apply the various techniques listed on the Wiki for rounded corners, especially the one listed on Albin.net[1] - and I've got a few questions for the collective wisdom. What I'm aiming for is to have rounded corners on all 4 corners of each of the items in a menu. This leads me to several apparent constraints:
1 - Because all 4 corners will need to be rounded, the sliding doors[2]technique doesn't seem like it will work as that technique only provides for 2 sides, not 4 corners. 2 - As a menu, the markup I'm working with should ideally be a list. This complicates many of the techniques I've seen (including Albin.net) which rely on nested <div>'s because <li>'s (inline) can't contain <div>'s (block). I've tried to convert this technique to using <span>'s, but have been running into problems with IE adding space to the menu items. 3 - Another aspect of menus is that the typically don't have a lot of text to use for hooks for CSS. A lot of very clean techniques [3] rely on many elements in the rounded element to achieve their effects - something I don't have available. I'm currently trying to use <span>'s. 4 - This one has me pulling out what little hair remains - I'm up against a self-imposed limit for the number of images on these pages, so I'm trying to combine rounded corner images into 1 and then use clipping to select only the corner I'm interested in. This (IIRC) introduces the necessity for absolute positioning. Am I correct in these constraints, or have I missed something along the way? Assuming that the above constraints are valid, here is a page which demonstrates the code I've been working on: http://morphosis7.byethost12.com/sandbox/clip5.php CSS and HTML are visible in the source, but the gist of the HTML is (for one menu option) : <li class="item1"><img class="testul" alt="" src="clipround.gif" width="6" height="6" /><img class="testur" alt="" src="clipround.gif" width="6" height="6" /><img class="testll" alt="" src="clipround.gif" width="6" height="6" /><img class="testlr" alt="" src="clipround.gif" width="6" height="6" />Knowlton School</li> And, the CSS: * { padding: 0px; margin: 0px; } body { background-color: #CCCCCC; } li { position: relative; margin: .5em; padding: 0 4px; color: black; font-weight: bold; } li img { position: absolute; overflow: hidden; height: 6px; width: 6px; } .item1 { background-color: #ff0099; } .testul { left: 0px; top: 0px; clip: rect(0px 3px 3px 0px); } .testur { right: 0px; top: 0px; clip: rect(0px 6px 3px 3px); } .testll { left: 0px; bottom: 0px; clip: rect(3px 3px 6px 0px); } .testlr { right: 0px; bottom: 0px; clip: rect(3px 6px 6px 3px); } My questions right now are first - am I needlessly limiting myself in the 4 constraints above, and second - is there a technique out there already that satisfies them - particularly the ability to use <span>'s instead of <div>'s, and also take advantage of the clip property? Or should I continue to try and develop down the road I've started (which at this point means getting IE 6 and earlier to function - IE 7, Firefox, Opera and Safari all seem to display what's there now correctly) Thanks for any feedback, Matt [1]http://www.albin.net/CSS/roundedCorners/ [2]http://www.alistapart.com/articles/slidingdoors/ [3]http://tutorials.alsacreations.com/cadre/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
