html - Apply automatically apply cell-spacing or padding based on "margin" given for IE -
o have polyfill ie7 transforms display:table actual tables , i'm using ie7.js (ie9.js file).
both working wonderfully , both doing great job allowing devs think less on ie7.
this have (join of main sheet , ie7 specific sheet):
/*ie7*/ .sidebyside{ display:table; } .sidebyside > *{ display:table-cell; } /*main*/ .a{ margin-left: 20px; } <li> <div class="sidebyside"> <img class="img" src="img"> <div class="sidebyside"> <div class="a">info a</div> <div class="a">info b</div> </div> <div>ok</div> </div> </li> this polyfills generate:
<style> ........ .a{ /* css overrides , invalidates set */ } .newclassa{ margin-left: 20px; } .newclassa > /*etc*/{ /* properties relative class */ } </style> <li> <div class="sidebyside"> <img class="img" src="img"> <table> <tbody> <tr> <td class="newclassa">info a</td> <td class="newclassa">info b</td> </tr> </tbody> </table> <div>ok</div> </div> </li> the <style> tag placed last 1 in <head>.
in order deal this, made this:
.sidebyside > * > * > td{ padding-left: expression(this.currentstyle['marginleft']); } unfortunately, didn't work. although css gives should have marginleft of 20px, instead, returning auto... padding-left becomes auto.
is there way seamlessly polyfill this? no 1 here minds if requires substantial amount of computation long browser doesn't hang because of it.
one main thing want follow supposed reusable parts. if set css either in stylesheet or inline other browsers, ie7 must follow too.
note: can tell 2 working specified here , not bug on of them. issue working specified doesn't specific use-case.
no matter how want ditch ie7... , ie8, contractor wants support more years.
would help?
css
.sidebyside table { border-collapse:separate; } html
<div class="sidebyside"> <img class="img" src="img"> <table> <tbody> <tr> <td class="newclassa">info a</td> <td class="newclassa">info b</td> </tr> </tbody> </table> <div>ok</div> </div>
Comments
Post a Comment