3

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/)

7
  • 1
    To open on IE8: fiddle.jshell.net/spiderplant0/FAxmp/show/light
    – RaphaelDDL
    Jun 13, 2013 at 21:51
  • @RaphaelDDL, thanks. I see the bug using this link also. I take it you see the bug also with IE8? Jun 13, 2013 at 21:53
  • Have just tested it in IE8 on windows XP (in VmWare) and bug exists there also. Jun 13, 2013 at 22:07
  • Tried to use jQuery to select it, but this fails in IE8 also... fiddle.jshell.net/spiderplant0/KZGFD/show/light Jun 14, 2013 at 14:20
  • Spider, try what @GCyrillus said in the answer: "re edit it seems like it parses only values of style , not the rule.". Test with img[style*=left] only. Probably will work if what GC said was true. But then, if any image with no float but with text-align:left; for e.g. will be selected as well.
    – RaphaelDDL
    Jun 14, 2013 at 14:31

1 Answer 1

1

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 */
}
12
  • 1
    Nope - all attribute selectors are supported in IE8 - in fact after testing locally it seems to be working fine ..
    – Adrift
    Jun 13, 2013 at 21:47
  • @CGyrillus, I am already using ie9.js to improve IE8. Maybe selectivizr.com is better though. Jun 13, 2013 at 21:50
  • @Adrift. Are you saying that it works for you with IE8? Thats strange. I am using IE8 emulation mode in IE10 on windows 7 64 bit. Which version of IE are you using please? Jun 13, 2013 at 21:51
  • @Adrift, thanks. How about RaphaelIDDLs link... fiddle.jshell.net/spiderplant0/FAxmp/show/light Jun 13, 2013 at 21:56
  • @Adrift, in a real IE8 it doesn't work . liveweave.com/GIOCxJ test it like i did with an IE8 stand alone (xp for my virtual machine) and find out what happens.
    – G-Cyrillus
    Jun 13, 2013 at 22:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.