Question

I’ve read other posts related to this but not get much for myself so I’m asking it here.

My CSS is working very well with the IE8, Chrome and Safari but doesn’t work with the Firefox and Opera.

body 
{
    background:FFFFCC;

    font: bold 11px/1.5em Verdana;
    }

h1 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    margin:0;
    padding:0;
    }

hr {
    border:none;
    border-top:1px solid #CCCCCC;
    height:1px;
    margin-bottom:25px;
    }

#tabs {
    float:left;
    width:100%;
    background:#BBF5F6;
    font-size:100%;
    line-height:normal;
    }

#tabs ul {
    margin:0;
    padding:10px 10px 0 10px;
    list-style:none;
    }

#tabs li {
    display:inline;
    margin:0;
    padding:0;
    }

#tabs a {
    float:left;
    background:url("space.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }

#tabs a span {
    float:left;
    display:block;
    background:url("complete.gif") no-repeat right top;
    padding:5px 5px 4px 6px;
    color:#FFF;
    }

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
    color:#FFF;
    }

#tabs a:hover {
    background-position:0% -42px;
    }

#tabs a:hover span {
    background-position:100% -42px;
    } 

I’m using this with the ASP.NET for my project. Is there anything that I’m missing.

Css in Chrome

Css in FF

Answer 1

Finally I got the solution. OMG how stupid I’m was using just \ for instead of / for link the css to my page. And this was working with others browsers without any problem and making trouble on Opera and FireFox. Sorry guys for this stupid one.