Internet Explorer And Google Chrome Display Differently

Posted on 2012-09-07
Last Modified: 2012-09-11

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?
Question by:surework1
    LVL 9

    Expert Comment

    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:

    LVL 10

    Expert Comment

    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. :)
    LVL 9

    Expert Comment

    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
    LVL 17

    Expert Comment

    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.
    LVL 17

    Expert Comment

    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" "">


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
    LVL 17

    Expert Comment

    Adding the DTD made IE behave with this page. Chrome and Firefox were fine with no DTD.

    Author Comment

    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.
    LVL 17

    Accepted Solution

    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Suggested Solutions

    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now