CODEWITHSUNDEEP
htmlcssinternet-explorer
Tom
Tom

Reputation: 4577

Elements rendering differently in Chrome/Firefox and Internet Explorer

This is really a head scratcher for me.

Certain elements on the following page are rendering differently in Chrome/Firefox and IE, specifically border radiuses and buttons.

It renders correctly in Chrome/Firefox but not IE.

Any ideas?

http://www.ansac.com/contact-us/soda-ash-request/

(the select list and email form footer is what is not rendering correctly in IE)

IE: enter image description here

Chrome/Firefox: enter image description here

Upvotes: 0

Views: 1155

Answers (3)

Sergey Tarasov
Sergey Tarasov

Reputation: 888

Your HTML contains the following directive in it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That probably switches IE into quirks mode. Try to replace it with <!doctype html>, that should switch IE to standards mode and all rounded corners should appear properly assuming it's IE11 as mentioned in comments earlier.

Additionally, you can enforce IE rendering mode by adding <meta http-equiv="x-ua-compatible" content="IE=edge"/> as the first tag inside <head> (see Internet explorer 9 will not recognize doctype sent by servlet from weblogic server and renders in document mode IE7 - extra characters before start?).

Upvotes: 1

Danko
Danko

Reputation: 1864

You can not use border-radius and expect that it will render nicely in ie8. You can always check browser support for some css feature at Can I Use

Upvotes: 1

Macias
Macias

Reputation: 62

Elements such as dropdown select are rendering differently depend of browser. What exaclly in border radius or buttons displaing wrong on IE?

Upvotes: 1

Related Questions