search

keithclark / selectivizr

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
1.71k stars 247 forks source link

shorthand CSS rules #10

Closed fcsonline closed 13 years ago

fcsonline commented 13 years ago

Hello,

first of all thanks for this great tool.

Yesterday, I was testing selectivizr and I found a problem with the shorthand declarations. I have been trying to reduce the usecase to minimum:

-- reset.css -- 

table, tr, td {
    background: transparent;
}

-- end reset.css --

-- style.css -- 

tr:nth-child(odd){
    background-color: rgb(0,255,0);
}

tr:nth-child(even){
    background-color: rgb(0,155,0);
}

-- end style.css --

-- index.html -- 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
    <head>
        <title>Selectivizr Test
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

        <script type="text/javascript" src="js/jquery-1.4.3.min.js">

        <!--[if (gte IE 6)&(lte IE 8)]>
        <script type="text/javascript" src="js/selectivizr.js"></script>
        <![endif]-->

    </head>
    <body>
        <table border="0">
            <tbody>
                <tr><td>Col1</td><td>Col2</td></tr>
                <tr><td>Col1</td><td>Col2</td></tr>
                <tr><td>Col1</td><td>Col2</td></tr>
            </tbody>
        </table>
   </body>
</html>

-- end index.html --

I tested the usecase in a Internet Explorer 7 vs. Firefox 4 and in the first one, the table is white and the second is green.

Do you know anything about it?

See you,

keithclark commented 13 years ago

I'm not aware of any issues related to shorthand declarations (by that, I'm assuming you mean table, tr, td {...}) but I'll recreate your test and feedback with my findings.

keithclark commented 13 years ago

I managed to recreated your issue and I've done a little reading. It looks like background: transparent in IE7 is buggy (now there's a surprise!). If you remove that rule from reset.css (or replace it with another) everything works just fine.

fcsonline commented 13 years ago

Oh, sorry. I did not know this 'behavior' of Internet Explorer.

I will modify the css according to your comment.

Thank you! ;)