Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 878
  • Last Modified:

Internet Explorer And Google Chrome Display Differently


I'd attached the html for your viewing.

May I know why IE8 and Chrome(latest version) display different result in their browser?

Where did I do wrong?
1 Solution
Essentially, browsers read the code in a Web page and interpret how to display the page to visitors.

Unfortunately, because Web browsers are created by different companies and the code they display has evolved dramatically over the years, not all Web browsers display Web pages the same way.

Differences in browser display can lead to unpredictable (and often frustrating) results because a page that looks good in one browser may be unreadable in another.

For more details please refer below link:

One way to help you solve the browser issues is to "normalize" your css. Please take a look at Normalize.css: Make browsers render all elements more consistently.

Best of luck. :)
In my experience, some elements in Chrome need to be put inside <div>...</div> in order to avoid conlifct, but also need to be set with their CSS class with parameters such as "float" and "align" (see also http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27812292.html).
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Mostly it is MicroSoft that chooses not to be compliant with the CSS rules agreed on by the world wide web consortium in the hopes all browsers display websites in the same way. But different versions of different browsers have bugs in them too.
This is my favorite article on IE vs compliant browsers:
Having said this, I think the most recent versions of IE are more compliant, but I still always create conditional style sheets for various versions of IE.
You have not included a document type declaration in your html, that is essential to prevent browsers from exhibiting the page in "quirks" mode because they don't know. Or did you know include that line? It should look something like:

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Adding the DTD made IE behave with this page. Chrome and Firefox were fine with no DTD.
surework1Author Commented:
Hello nanharbison,

The "Try Demo" is suppose to be a blue button

After adding the DTD, the blue button effect has lost.

Hello gregg_s

I had added normalize.css but I didn't see any difference when I run the html in 2 different browsers.
I didn't know that, it wasn't blue in any of my views of the page. I found you are missing a closing bracket "}" before button1

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now