View Full Version : converting CSS expression to javascript

08-19-2008, 01:23 AM

I am using a holy grail css website template which requires a CSS expression to work properly in IE7. The website renders fine in all major browsers but unfortunately does not validate. So, I moved the CSS expression (IE Dynamic Expression) to a separate JavaScript file. This kinda works but gives a syntax error. So, to reduce problems I am conditionally calling it using:

<!--[if IE 7]>
<script type="text/javascript" src="./css/IE7fix.js"></script>

Now only IE7 is seeing it which is what I wanted. However, I understand CSS expressions are bad for performance as they are continually calculated every time the mouse moves, etc. So, I would like to convert the expression to pure JavaScript which would ideally resolve the syntax error and improve the performance.

Unfortunately, I have not learned JavaScript yet, so was hoping someone could help explain what this code is actually doing. Maybe from there I can run with it and research the rest. This is the JavaScript file:

#container > #left { left: -240px; /* -LC width for others */
margin-left:expression( document.all.center.offsetWidth * -1 + parseFloat
(document.all.center.currentStyle.paddingLeft) + parseFloat
(document.all.left.currentStyle.paddingLeft) + parseFloat
(document.all.left.currentStyle.paddingRight) ); } /* Fix for IE7 */

P.S.....the fix is discussed here: http://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7


rnd me
08-19-2008, 03:54 AM
function els(em) {return document.getElementById(em).style;}

els("left").marginLeft = ( document.all.center.offsetWidth * -1 + parseFloat
(document.all.center.currentStyle.paddingLeft) + parseFloat
(document.all.left.currentStyle.paddingLeft) + parseFloat
(document.all.left.currentStyle.paddingRight) );

08-21-2008, 01:59 AM
Thank you for your efforts and surprisingly quick reply. I have implemented the code without any problems.

Much obliged,