CODEWITHSUNDEEP
csscss-selectorsinternet-explorer-10
rahul
rahul

Reputation: 7663

CSS Selector Not Working IN IE10

I have a CSS selector like this

table[id^="tblBody_"] tbody tr td input[type="checkbox"]
{
    margin-top:-3px;
}

HTML

<table id="tblBody_tblApplicationWizardPageDetail">
<tbody>
<tr>
  <td>
    <input id="chkDisplayedBit" type="checkbox"/>
  </td>
</tr>
</tbody>
</table>

I have to apply this css on checkbox which exist in table cell where table id starts with tblBody_

this thing working fine in IE8 but not in IE10

Upvotes: 1

Views: 3000

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The problem is not in the selector, as you can see e.g. by adding outline: solid red inside the rule. And setting a positive margin works. The problem seems to be in the way IE deals with a negative margin on the checkbox element. I don’t know whether actual IE 8 has this problem too, but IE 8 emulation mode in IE 10 has it.

The simple workaround is to use relative positioning instead of negative margin:

position: relative; top: -3px;

Upvotes: 3

Sahil Popli
Sahil Popli

Reputation: 1995

E[foo^="bar"]

an E element whose "foo" attribute value begins exactly with the string "bar"

selector level 3

and in caniuse.com they have written IE 10.0 supports css3 selector see here an same by msdn IE 10 supports attribute selectors

if everything not works use selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8 []surely works in IE10.

Upvotes: -1

Vince
Vince

Reputation: 36

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        *{ margin: 0px; padding: 0px; }
        table[id^="tblBody_"]{ border-collapse:collapse; border-spacing:0; margin: 20px auto; width: 200px; }
        table[id^="tblBody_"] tbody tr td{ border:1px solid #ddd; width: 90px;padding: 5px;  }
        table[id^="tblBody_"] tbody tr td input[type="checkbox"] { margin-left: 20px; }
    </style>
</head>
<body>
    <table id="tblBody_abc">        
        <tbody>
            <tr>
                <td>1</td>
                <td><input type="checkbox" name="hobbit" id="hobbit"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

I use this, it works fine.

Upvotes: 1

Rob Alarcon
Rob Alarcon

Reputation: 1450

if your html is similar to the following snippet, it will work:

<table id="tblBody_32">
    <tbody>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions