From: "Rory Bernstein" <[email protected]> > Hi All, > > http://rorybernstein.com/roundcorners/ > > On this page, the light blue box that surrounds the horizontal grey graphic > has rounded corners with the help of a little css. > It's working great in a lot of browsers, but not in IE8. I have not been able > to test it on IE7 or lower yet... > > In IE8, the light blue box with the rounded corners has an ugly dark border > all the way around it. Can anyone tell me how to alter > the CSS to get rid of this? > > I used this page as a guide to get the rounded corners working on all > browsers: > http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
Hi Rory, If you do not understand JavaScript (what's in the HTC file) and Microsoft VML (Vector Markup Language, which was proposed to the W3C but not accepted) then stick to pure CSS border-radius in terms of progressive enhancement [1]. These rounded corners for IE hacks and tricks are dangerous to play with unless the situation is precisely controlled. The major flaws are: The "secret" container that carries the curves does not properly reflow. So if text is resized, or if the container is horizontally flexible, its contents will escape the box. If the hack is applied to an element whose visibility, size, or position is manipulated dynamically, the contents will escape the container or the container will remain where the actual content was before it was moved or re-positioned. Other so-called curved corner solutions, such as jQuery's are even worse as they add scores of DIVs (or other elements) that use transparent pixels to "erase" the square edges. The result is bloat and very ragged edges. IE9 supports border-radius so over the next several years, folks can use it - but in a progressively enhanced scenario only. The best solution if rounded corners are a client requirement is, and will continue to be for some time, CSS-assigned background images. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel [1] http://en.wikipedia.org/wiki/Progressive_enhancement ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
