CODEWITHSUNDEEP
cssinternet-explorer-8css-selectors
spiderplant0
spiderplant0

Reputation: 3952

CSS 'contains' attribute selector not working in IE8

I want to change the margins round images depending on how they are floated. I used the 'contains' attribute selector which works fine except for IE8. See code below.

I cant really alter the HTML (eg cant add a class to identify the element) (as it is generated by a WYSIWYG editor within Drupal).

Can anyone suggest an alternative I can use to target the "float:left"?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
img[style*="float"][style*="left"]
{
    margin: 40px;
    background: red;
}
</style>
</head>
<body>
<img src="http://jsfiddle.net/img/logo.png" style="float:left" width="100" height="100">
</body>
</html>

(I also created a jsfiddle but its no good as jsFiddle seems to have problems with IE8: http://jsfiddle.net/spiderplant0/FAxmp/)

Upvotes: 3

Views: 1418

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105903

You will need a polyfill, easy to implement if you already use a js framework : http://selectivizr.com/
But there's others.
edit: as you tell, you are already using one.

ie9.js

You should make sure that your style are in an external file and apparently not linked via @import in order to see polyfills efficient.
Cheers

re edit it seems like it parses only values of style, not the rule.

Therefore, the following selector will work on IE8:

img[style*=left] {
    /* css */
}

Upvotes: 1

Related Questions