CODEWITHSUNDEEP
htmlinternet-explorercross-browser
devWaleed
devWaleed

Reputation: 475

Cross-Browser/Platform Support for Website

I designed the website : http://piratesofpopulous.comli.com/ and I am still working on it, But there is a problem, My website doesn't seem to have same design for all browsers, In Chrom and Mozilla, You can see the radius on few things, But In IE its not showing and The layout is totally messed up, Can you tell me how to get it fixed.

My "border-radius and margin" is not showing correctly in IE, Is there anyway to do it in IE? I haven't define the doc types in PHP and HTML, Can that be a problem?

Also, All of my pages are *.php format. They have HTML but there extension is .PHP, So, Do I need to define the doc types and some other border-radius attributes for IE support?

Help please, or My clan members won't join my site.

Upvotes: 1

Views: 141

Answers (2)

Spudley
Spudley

Reputation: 168655

Firstly, you asked if doctype is important, and the answer is a very big YES.

Add the following line to the very top of your HTML code (above the <html> tag):

<!DOCTYPE html>

This should help with the margins and other weird layout problems. Without the doctype, IE goes into "quirks mode", which is a very old mode that works differently to all other browsers.

If you're in IE9, it might also help with the border-radius and box-shadow problems: IE9 does support these features, but might not support them in quirks mode.

If you're in IE8 or earlier, the browser simply doesn't support border-radius or box-shadow. My advice is to just let Ie8 users live without these features; your site may not look quite as good, but it'll be usable, and it might encourage them to upgrade their browser.

If you really want to support these features in IE8, there is a script called CSS3Pie that adds both border-radius and box-shadow features to IE. Click the link to download it and follow the instructions for setting it up on your site. Whether it's worth the effort to make IE8 look good is up to you.

Hope that helps.

Upvotes: 3

Jared Drake
Jared Drake

Reputation: 1002

I think part of your problem is that you are missing stuff like this in your css to support the browser clans.

-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 6px rgba(0,0,0,0.3);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;

Upvotes: -1

Related Questions