HTML,CSS: rounded corners have not transparent background in IE

views:

answers:

+3 Q:

HTML,CSS: rounded corners have not transparent background in IE

hi,

I have an issue with rounded corners in IE. There are white areas instead of transparent background. See image: http://dl.dropbox.com/u/72686/roundedIE.png

I'm using this jQuery plugin to create rounded corners: www.malsup.com/jquery/corner

And I'm also using transparency on each block.

thanks

+1 A:

You could try creating the rounded corners with CSS3 and then use CSS3 pie with internet explorer to get the rounded corners fixed.

EDIT:

Just read this on the malsup website you mentioned.

Recently I added support for native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property on the element. But in IE, we'll have to wait for version 9 before that is supported. And for all browsers, choosing a pattern other than "round" requires the use of the "div stips" method.

For other readers, can this be an indication that this jQuery plug-in is based on the new css3 and html5 techniques?

Rob 2010-07-19 08:33:47

Sort of. It's using the new CSS3 stuff for browsers that have the right level of support, but adding extra markup to achieve the same effect in those browsers that can't. It's not an approach I'd take, personally. Seems like an awful lot of scripting overhead just for a couple of curvy corners, and it won't be visible to non-javascript users. OP would be better off using the top and bottom corner caps CSS sprite method for this: http://www.learn-css-tutorial.com/CSS-Background-Image-Tricks.cfm (see 'Flexible-width Rounded Corner Boxes' section)

hollsk 2010-07-19 08:40:43

SO, should I use CSS3 -moz-border-radius: 5px; -webkit-border-radius: 5px; and use that plug-in for IE ? And that's it ? thanks

Patrick 2010-07-19 08:49:52

One more thing: can I specify rounded-corners only for top or bottom corners in CSS3 ? (for ALL browsers!)

Patrick 2010-07-19 08:52:18

@Patrick. CSS3 is not supported by IE very well, so therefore i would try using CSS sprites like hollsk said. If that doesn't work try using the plug-in (which i prefer, but that's personal)

Rob 2010-07-19 09:03:32

ok, summarizing: PIE works in IE8 if I want to make all corners rounded. But it doesn't work if I only want to make 1 corner rounded (top-let, bottom-left.. etc). In IE7 it doesn't work. Do you confirm this ?

Patrick 2010-07-19 11:12:10

@Patrick, i can't confirm this unfortunately. I haven't tried PIE yet, but you could try browsing their forum at http://css3pie.com/forum/ to see if there are more users with the same issue.

Rob 2010-07-22 08:02:41

I've solved with curvycorners.net

Patrick 2010-07-22 10:05:37

ansaurus

tags:

views:

answers:

HTML,CSS: rounded corners have not transparent background in IE

related questions