IE6/IE7 + Rounded corners...extra unwanted padding!

Question

Basically speaking, FF3 and IE8 render it this way, which is what I want:

http://img4.imageshack.us/img4/3899/cornersfirefox.jpg

However, IE7 and IE8 render it like this:

http://img18.imageshack.us/img18/4526/cornersie.jpg

I use this solution for rounded corners without images:

http://www.editsite.net/blog/rounded_corners.html

And finally, here is my code and CSS (dynamically generated, so sorry for the lack of proper tabbing):

HTML CSS

Thank you in advance!

Answer 1

on the website you link to for the rounded corners js file, there are many comments that complain the script doesn't work in internet explorer. Since you are already including jquery, I can recommend a jQuery plugin called "corners" that seems to work in ie.

http://plugins.jquery.com/project/corners

Answer 2

Just use the corner-radius CSS property and if someone is using an old browser then they just get no corners. This is a much better and scalable solution than bastardizing your page with unnecessary JavaScript that produces hundreds of excess divs - that's just plain silly!