For unknown reasons my css is not applying in IE8, works fine in FF, Chrome. WHat can be the reasons?

Recommended Answers

All 11 Replies

Is only your computer affected? If I remember correctly, Internet Explorer has a setting where you can choose to overwrite a website's CSS file with your own stylesheet. Other reasons might be an old version of the CSS file is cached. Try clearing your temporary internet files.

Cleared the cache but not working. Website is offline, I am creating site using joomla, everything was working fine but after I reinstalled template all formatting was gone and its behaving like its not reading CSS. Last time same thing happend and I had to repeat all the procedure to create template.
I changed nothing, only thing I did is recreated template package and installed and I dnt know why it is not reading CSS.

Make sure that the CSS file is uploaded correctly, and that the HTML is referencing the correct location for it.

Ya its working fine in other browsers

html, body {
    margin: 0px;
    padding: 0px;
    left: 0px;
    top: 0px;
    color: white;
    font-size: .85em;
    font-family: 'Roboto', sans-serif;
}

img {
    border: none;
}

h1, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
    color: white;
}

/*page background*/
#background {
    margin: 0px;
    padding: 0px;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    position: fixed;
}


    #background img {
        top: 0px;
        left: 0px;
        min-height: 100%;
        min-width: 100%;
        position: fixed;
    }
/*div over background image*/
#cover {
    top: 0px;
    left: 0px;
    min-height: 100%;
    min-width: 100%;
    position: fixed;
    background-color: black;
    opacity: 0.8;
    filter: alpha(opacity = 80);
}

#container {
    position: relative;
    width: 960px;
    margin: 0px auto;
    top: 20px;
}
/*header*/
#header {
    height: 60px;
    margin-bottom: 10px;
    font-size: 1.1em;
}

    #header img {
        float: right;
        width: 200px;
        padding-right: 30px;
    }

#left {
    width: 250px;
    float: left;
    padding-top: 10px;
}
/*main content*/
#mainContent {
    margin: 0 0 0 270px;
    position: relative;
    text-align: justify;
    color: #008081;
    padding-top: 10px;
    padding-right: 30px;
}

.wrapper {
    overflow: hidden;
}

.menu {
    display: block;
    padding-top: 30px;
    margin-left: 230px;
}

    .menu li {
        display: block;
        float: left;
        padding: 5px;
    }
/*home page images*/

#footer {
    display: table;
    margin: 0px auto;
    padding-bottom: 10px;
    color: #424747;
    margin-top: 5px;
}

well thats my css. Recreated template but nothing is helping me. Html file works fine in IE8 but in joomla same template isnt working. And same template was working properly in all browsers before I reinstalled it.

And I just checked in IE8 using developers tools, it reads the css but is not applying.

W3C CSS(3) Validator is reporting a parser error on rule (53),** # cover **.
53 #cover Parse Error = 80)

The problem is caused by your

#cover  { 
    top : 0; 
    left : 0; 
    min-height : 100%; 
    min-width : 100%; 
    position : fixed; 
    background-color : black; 
    opacity : 0.800000011920928955078125; 
}

There may be severeal problems with this style but my judgement none appears to be crucial.
consider revising the opacity value from 0.800000011920928955078125, to what will really happen: 0.8,
or opacity: .8;

Another problem might arise by "position: fixed" rule statement.
If parent element has no declared dimensions, the actual element will have to collapse to its parent dimensions which are unspecified; therefore the strict browser will have to either assume 0 dimension or throw a value parsing error, or both.

You are using min-height and min-width which (to say the least) serves absolutely no purpose at all.

p.s.:
TIP: in fact you need to reinstall IE in case you've installed FF or Chrome or Safari on top of it, always and since the earliest ff version releases.

Is there a link to view the site, or is it local? If local could you post the page source from the browser?

Might also be helpful if you posted the <head> of your HTML document.

0px is invalid as a dimension, zero is dimensionless, 0px=0em=0% and should be expressed as 0
IE8 could be doing its thing and spitting the dummy for something as simple as that

I think that using human format of 0.8 instead of a standard programming: .8 is what's causing the parsing error.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.