ie9 's compatiblity with modern html and css language (Cross-browser CSS)

Question

I made a ultra basic page consist of several divs and set of css rules.

It works perfectly with every browser that i have seen for last 2 years. Because of i am new with web i have no idea what can old browsers handle or not. I know that modern scripts like html5 , javascript , webgl etc will not work with old browsers. However this page is pretty simple as i told. And weird thing is it works with older versions of chrome and firefox. But ie9 completely cant handle most of the css rules...

<style media="screen" type="text/css">
    #main
    {
     padding:0;
     margin:0;
     width:100%;
     background-image:url(http://www.sisecam.com.tr/ik/index1.4.1.png);
     background-repeat:no-repeat;
     background-size:100%;
     background-color:white;
    }
    #warningmsg
    {
    position:relative;
    left:40px;
    top:30px;
    }
    #locatordiv
    {
    position:relative;
    top:436px;
    }
    #yellowribbon
    {
    width:100%;
    height:320px;
    background-image:url(http://www.sisecam.com.tr/ik/index1.4.3.png);

    background-repeat:no-repeat;
    background-color:#f5c11f;
    }
    #loginbutton
    {
     margin:0;
     padding:0;
     width:100%;
     display:block;
     height:35px;
     position:relative;
     left:85px;
     top:50px;
    }
    #logo
    {
        margin-left:auto;
        margin-top:90px;
        background-image:url(http://www.sisecam.com.tr/ik/logo.png);
        background-repeat:no-repeat;
        width:100px;
        height:100px;
        position:relative;
        right:20px;
    }
    .title
    {
        position:relative;
        left:20px;
        top:2px;
        font-size:15px;
        color:#FFF;
    }
    .input
    {
        display:block;
        height:25px;
        width:160px;
        background-size:200 40;
        background-repeat:no-repeat;
        margin-top:34px;
        position:relative; 
        top:55px;
        left:65px;
    }
    input
    {
        font-size:17px;
        width:170px;
        height:20px;
        border-style:none;
        padding:0;
        outline:none;
    }
    body 
    {
     background:white;
    }
    input[type="submit"] {
     opacity:0;
     width:inherit;
     height:inherit;
    } 
</style>

Assuming that ie9 can handle divs and their ids ...

My main problem is css compatibility. Is it possible to write css rules that works with ie9 as it works in rest of the browsers?

Any suggestion will help.

http://stackoverflow.com/questions/6418139/media-query-not-working-in-ie9 — ElendilTheTall, Jun 17 '14 at 09:37
Have you set a DTD for your HTML document - without a DTD your browser will go into "Quirks mode" and some styling may not look as expected. — Kinnectus, Jun 17 '14 at 09:37
Apart from some of the newer CSS3 stuff, IE9 works fine, generally. It shouldn't have a problem with the CSS above, as long as it's written properly. — ralph.m, Jun 17 '14 at 10:06
@Big Chris Yes it seems that it is caused by DTD. ` ` solved flawlessly .Would you want to post the correct answer. — user2102266, Jun 17 '14 at 10:43

score 1 · Accepted Answer · answered Jun 17 '14 at 11:04

When writing syntactically correct HTML you should always include a Document Type Definition (DTD) to inform the browser the type of document it is rendering and whether it should apply certain rendering rules.

This can also be the key when you are experiencing certain display problems on different browsers - especially IE!

IE has a "quirks mode" if a DTD is not present - this causes the browser to not apply any rendering rules and many styles (although applied) to still look incorrect as to what the developer desires.

ie9 's compatiblity with modern html and css language (Cross-browser CSS)

1 Answers1