CSS does it for you, via border-radius, although for older browsers you would add -webkit-border-radius and -moz-border-radius.Finally to target older IE you would finish with behavior: url(PIE.htc); You can check out PIE.htc at http://css3pie.com/

ronpat
—
2012-11-19T21:37:47Z —
#3

Vineet, it seems to be working exactly as designed in IE8 and Firefox. You didn't describe how it is "broken". If you are referring to the little "feet" beside the bottom corners, those are the left and right borders that you've applied to #mega div. Maybe give your .gif a solid background color instead of transparent. How did you fix this problem before?

Stomme_poes
—
2012-11-19T22:03:14Z —
#4

Yup, ronpat has it: those are your borders sticking out.

If you keep using images... you could have your submenu hold the sideborders and let the div only have a bottom border and the images. That's one possibility.Another is similar to ronpat's idea... but instead of making the images larger, you could give the spans borders instead. White ones. Unless the background behind the menu won't be white, but I dunno what you're planning.

drjohn said:

Finally to target older IE you would finish with behavior: url(PIE.htc);

I would feel bad wasting someone's CPU for a rounded doohickey. Let'em have pointy corners like in the good old days, sez I.

vinpkl
—
2012-11-20T05:52:06Z —
#5

ronpat said:

Vineet, it seems to be working exactly as designed in IE8 and Firefox. You didn't describe how it is "broken". If you are referring to the little "feet" beside the bottom corners, those are the left and right borders that you've applied to #mega div. Maybe give your .gif a solid background color instead of transparent. How did you fix this problem before?

hi ronpat

yes you are right

i m talking about the right and left borders that extend around the corners.

i cannot have solid background around the corners because those drop downs need to be above all my content.

On homepage they will be above the image slider, on inside pages they will be above header banners that are multicoloured

So i need to have to rounded corners transparent.

vineet

Dr_John
—
2012-11-20T10:21:02Z —
#6

Stomme_poes said:

I would feel bad wasting someone's CPU for a rounded doohickey. Let'em have pointy corners like in the good old days, sez I.

I would consider using something like PIE for, say, improved form controls. But honestly, like the idea that a website looks and acts differently between user agents feels at home with me, and letting users of square antigradientious shadowless browsers get what they get. Having them run a bunch of Javascript for... looks... just seems wrong to me.

That all said, Vineet might find everything much easier if he were to use it though. Might also depend what IE use levels are in India or wherever his visitors are. If they're low I'd still rather CSS3+noPIE

vinpkl
—
2012-11-20T11:02:24Z —
#8

hi stomme

if left_curve is 15pxright_curve is 15px

But i want to mention center_curve in percentage. so that i dont have to change it, when i change the div width.