My CSS is not working in IE

Question

I am using PHP and I have one CSS file. Everything is working fine in Mozilla and Chrome but it's not working in IE.

Some CSS like .Mainheader nav is not working in IE. How can I manage my page so that it looks same in different screen resolutions?

html:

 <header class="mainHeader" > 
<nav>
<ul>
 <li >
<a href="index.php">Home</a>
</li>
 <li >
<a href="about_us.php">About Us</a>
</li> 
<li>
<a href="#">How It Works</a>
</li>
 <li>
<a href="contact_us.php">Contact</a>
</li> 
<li>
<a href="register.php">Manufacturer Register</a>
</li> 
</ul>
</nav>
</header>

Here is my css code:

/* ===========================
   ======= Body style ======== 
   =========================== */

body {
    background-image: url('img/bg.png');
    color: #000305;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }

.body {
    clear: both; 
    margin: 0 auto; 
    width:60%;
}

.divimg{
    margin-left:480px;margin-top:-40px;
}
.divchat{
    margin-left:610px;margin-top:-60px;
}

.reginput
{
    width:250px;
    height:25px;
    border:1px solid gray;
    border-radius:5px;
    margin:5px;
}   
    a.one {text-decoration:none}
a.one:link {color:#CF5C3F;}
a.one:visited {color:#CF5C3F}
a.one:active {color:#CF5C3F}
a.one:hover {color:#CF5C3F;background-color:#FFFFFF;}
/* ===========================
   ========= Headings ======== 
   =========================== */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em}     /* 14px */

h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: .8em;
}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
    outline: 0;
    }

a img {
    border: 0px; 
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
    padding: 0 1px;
    text-decoration: none;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
    text-decoration: none;
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */

.mainHeader nav {
    background: #666666;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 0px auto;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    float: left; 
    display: inline; 
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CF5C3F;
    color: #fff;
    text-shadow: none !important;
}

.mainHeader nav li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader img {

    height: auto;
    margin: 1% 0;
}

/* ===========================
   ======= Content Area ====== 
   =========================== */

.mainContent {
    overflow: hidden;
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width:750px;
}

.topcontent {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    padding: 0% 0%; 
    margin-bottom: 3%;
}

.bottomcontent {
    background-color: #FFF; 
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    padding: 3% 5%;
}

.content {


    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

.post-info {
    font-style: italic;
    color: #999;
    font-size: 85%;
}

/* ===========================
   ======== Sidebar ========== 
   =========================== */

.top-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%;
    margin-bottom: 2%;
}

.middle-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%;
    margin-bottom: 2%;
}

.bottom-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #FFF; 
    padding: 2% 3%;
}

.btnstyle{
    background-color:#00E6E6;
    border:1px solid #000;
    padding:5px;
    border-radius:5px;
    color:#FFFFFF;
}

/* ===========================
   ========= Footer ========== 
   =========================== */

.mainFooter {
    width: 100%;
    float: left;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left: 0;
    background-color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    color: #FFF;    
}

.mainFooter p {
    width: 91%;
    margin: 2% auto;
}

/* ===========================
   ====== Media Queries ====== 
   =========================== */

@media only screen and (min-width : 150px) and (max-width : 1024px)
{
    .body {
        clear: both; 
        margin: 0 auto; 
        width: 90%;
        font-size: 90%;
    }

    .mainHeader nav {
        background: #666;
        font-size: 1.143em;
        height: 200px;
        line-height: 30px;
        margin-bottom: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainHeader nav ul {
        list-style: none; 
        margin: 0 auto;
        padding-left: 0;
    }

    .mainHeader nav li {
        margin-left: 0 auto;
        width: 100%;
    }

    .mainHeader nav a:link, .mainHeader nav a:visited {
        color: #FFF;
        display: block;
        height: 30px;
        padding: 5px 0;
        text-decoration: none;
    }

    .mainHeader nav a:active,
    .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
        background: #CF5C3F;
        color: #fff;
        text-shadow: none !important;
    }

    .mainHeader nav li a {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainHeader img {
        width: 100%;
        height: auto;
        margin-bottom: 3%;
    }

    .mainContent {
        overflow: hidden;
        line-height: 25px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        margin-top: 4%;
        margin-bottom: 2%;
    }

    .topcontent {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        padding: 0% 0%;
        margin-bottom: 4%;
    }

    .bottomcontent {
        background-color: #FFF; 
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        padding: 2% 5%;
    }

    .content {
        width: 100%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
    }   

    .post-info {
        display: none;
    }

    .top-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0;
        padding: 0 7%;
        margin-bottom: 0;       
    }

    .top-sidebar p {
        width: 90%;
    }

    .middle-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0;
        padding: 0 7%;
        margin-bottom: 0;   
    }

    .middle-sidebar p {
        width: 90%;
    }

    .bottom-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0%;
        padding: 0 7%;
        margin-bottom: 1%;
    }

    .bottom-sidebar p {
        width: 90%;
    }

    .mainFooter {
        width: 100%;
        float: left;
        margin: 2% 0;
        padding-left: 0;
        background-color: #666;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        color: #FFF;    
    }

    .mainFooter p {
        width: 86%;
        margin: 2% auto;
    }

    .divimg{
    margin-left:0px;margin-top:0px;text-align:center;
}
.divchat{
    margin-left:0px;margin-top:0px;text-align:center;
}

    .divimg img { max-width: 10%; }
    .divchat img{
    max-width: 30%;
}

.reginput
{
    width:250px;
    height:25px;
    border:1px solid gray;
    border-radius:5px;
    margin:5px;
    text-align:center;
}
}

create a style sheet for IE and borders does not work in IE 8 — Jorge Y. C. Rodriguez, Jul 03 '13 at 05:38
What version of IE? What is it that isn't displaying correctly? More details will be required to help with the issue — elzaer, Jul 03 '13 at 05:38
i have IE 8 ..this is not working in IE

Home

About Us

How It Works

Contact

Manufacturer Register — chirag ode, Jul 03 '13 at 05:40
Please reduce this to a specific, reproducible problem, and explain exactly what the problem is. — jprofitt, Jul 03 '13 at 05:41
@akash That's an entirely unreasonable suggestion. The OP has no control over what the site's users browse with. — jprofitt, Jul 03 '13 at 05:45

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

What version of IE you are using? IE have less support for HTML 5. Kindly read the below questions, may be these will help you:

header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?

html5 new elements (header, nav, footer, ..) not working in IE

and also this

http://www.impressivewebs.com/html5-support-ie9/

edited May 23 '17 at 12:25

Community

1
1

answered Jul 03 '13 at 05:41

Altaf Hussain

5,166
4
30
47

so try – steven Jul 03 '13 at 05:42
1

Then read http://www.impressivewebs.com/html5-support-ie9/ , it has no support for NAV and other HTML 5 tags , so it will not work in IE 8 . – Altaf Hussain Jul 03 '13 at 05:43
and
instead of
– Jorge Y. C. Rodriguez Jul 03 '13 at 05:43
ok sir i'll try,and how can i manage with defferent screen resolution – chirag ode Jul 03 '13 at 05:45
managing different resolution is a huge topic. I think you should try to use some css / js framework like twitter bootstrap http://twitter.github.com/bootstrap/components.html , which also provide support support for responsive layouts. It has only two main files, css file, js file and about two images, but it is very good and you will be free to worry about browser supports, even IE 7 :) . – Altaf Hussain Jul 03 '13 at 05:48

score 1 · Answer 2 · answered Jul 03 '13 at 05:46

1

To add to altafhussain's answer, take a look at ie-7.js / ie-9.js too.

https://code.google.com/p/ie7-js/

It's a small Javascript which you can embed (look at the docs on the linked page). It automatically makes IE7 and IE8 support the HTML5 tags like , and . It also allows to use eg :before and :after pseudo classes

answered Jul 03 '13 at 05:46

elveti

2,316
4
20
27

what about nonjs users? – Class Jul 03 '13 at 05:47
Personally I don't support nonjs IE-users. If someone chooses to still use IE7 or IE8 AND turns off their JS, they are dead to me ;) But if you do want to support them, I'd recommend using
tags instead of html5 tags (eg
instead of
)
– elveti Jul 03 '13 at 06:03

score 0 · Answer 3 · answered Jul 03 '13 at 06:44

0

I dont know if its the same like that from intval, but here is another way to help IE 8 to understand HTML5:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Google Code HTML5 for IE

answered Jul 03 '13 at 06:44

Nico

86
2

My CSS is not working in IE

3 Answers3