Need help & advice | HTML CSS non-compatibility issues @ Internet Explorer

[gdebojyoti.mail96]

I am creating a template "Metallica". It can be seen at http://www.debojyotighosh.com/labs/metallica

The page looks quite good when viewed using Firefox, Chrome or Opera. But it looks really horrible when viewed using Internet Explorer 9.

I understand that IE9 does not support rounded corners, div shadows, text shadows. But I was surprised (and pretty annoyed) when I found that even the divs were not rendered correctly and there were uneven gaps in some places.
As I said just before, the entire thing looks horrible in IE9.

Snapshot of Internet Explorer 9 view: http://www.debojyotighosh/labs/metallica/snapshots/metallica-ie9.png

Snapshot of Firefox 9 view: http://www.debojyotighosh/labs/metallica/snapshots/metallica-ff9.png

The views from Chrome and Opera are almost the same as that from FF.

The CSS file for the template is located at http://www.debojyotighosh/labs/metallica/scripts/css/style.css


Please advise how to correct the problems and make my site look the same in IE(6,7,8,9), too. Also tell me how to find an alternative to the rounded corners, div shadows and text shadows.

You can also give me some links to related solutions.

Thanks in advance.

 

[blackdev]

What exactly is the code for the background? I saw that you used the image 2.png for the background. Give us more details.

---------- Post added at 08:05 PM ---------- Previous post was at 07:58 PM ----------

What exactly is the code for the background? I saw that you used the image 2.png for the background and probably you used the opacity attribute in CSS. For IE you may use this

filter:alpha(opacity=40)

P.S. Sorry for double post but the "edit button" doesn't work.

 

[essellar]

I have no idea what version of IE9 you're using -- mine supports both border-radius and box-shadow with the standards (no prefix) notation (and using rgba values for box-shadow). No, it doesn't support text-shadow. But then, you aren't using a doctype declaration, so IE9 thinks you want it to pretend to be IE6 in quirks mode.

Doctype declarations are not optional, people.

 

[blackdev]

I have no idea what version of IE9 you're using -- mine supports both border-radius and box-shadow with the standards (no prefix) notation (and using rgba values for box-shadow). No, it doesn't support text-shadow. But then, you aren't using a doctype declaration, so IE9 thinks you want it to pretend to be IE6 in quirks mode.

Doctype declarations are not optional, people.

Oh god, this is sure the problem. I do not thought about it.

 

[essellar]

See? Adding the doctype fixes IE9, and IE8, though imperfect, won't be horrible. Honestly, I'd suggest forgetting about IE7 and IE6 — even Microsoft wants to forget about IE6 — beyond making the site function at the most basic level. You can use Modernizr for some things (loading it with conditional comments), but I wouldn't go out of my way; the only people who are actually stuck with IE6 and IE7 are the same people who are stuck behind corporate firewall/proxies that won't let them visit anything other than a few IT-Department-approved websites. Everyone else (and I'm talking about XP users here) will be able to make it up to IE8 or use a modern third-party browser (Chrome, Firefox, Opera or even Safari for Windows).

You will want to make the site accessible to people who can't see the nice graphics, though. You won't have to worry about pixel-perfect layout or anything, but as long as your markup is semantic and sound, it will work in alternate browsers (like the Braille version of the Lynx browser), and if you use the appropriate ARIA microdata and consistently using appropriate alt attributes, you will make things a lot easier on users of text-to-speech technologies like JAWS. (And you will also be doing more SEO by making your site accessible than you will by "doing SEO".)

 

[gdebojyoti.mail96]

Thanks for the advice. This forum is awesome.. And that's just because there are helpful and knowledgeable guys like you all.
Thanks again.