browser compatibility issues-css

I am getting this display in IE 7

I am getting this display in Firefox:

for the following code

Could anybody point me, What I should do to make the IE Display simalar to Firefox and also, How Do I make the Size should be same开发者_StackOverflow中文版 for all the headings?

Internet Explorer does not support gradients, shadows, nor border-radius properties. border-radius is supported in IE9, but this won't be of much help!

You can look into CSS3 Pie, which uses IE-specific .htc files to achieve almost the same effect.

For now, if you really need to be fully compatible with all IE's (and other browsers for that matter) I'd use an image. It's not very nice but at least you can rest assured that it will always work ;-)

Rounded corners and drop shadow aren't going to work in IE7 without a lot of clever image tricks. You can't fix it through CSS alone.

Alternatively you could probably find a JavaScript plugin which would create these effects for you if you don't mind taking that route (see curvy corners for example).