Ok, so here is something back for the group for all the help I got (special thanks to Paul O'B).
Over the past few weeks I have been racking my brains on one CSS fault of IE - you cannot specify BOTTOM property when you specified TOP, and similarly you cannot specify RIGHT once you specified LEFT. Given that in standard-compliant box model the padding is added on top of your width or height, you are effectively unable to style an object that takes up the full width and/or height of its parent EXCEPT for a gap on each side. This is only problematic in IE 6 and below, since in IE 7 as well as FF and other "well-behaved" browsers you can easily set top / bottom / left / right properties, and the browser then stretches the width / height accordingly.
Because of this IE bug, I faced a problem - should I style in a quirks mode (where lot of probelms can be overcome by, well, the quirks) and then separately cater to compliant browsers, or should I do the right thing, style everything in a standards-compliant mode, and then plug the IE gap programmatically, using javascript.
Since IE7 has fixed this bug and since standard-compliant styling is the right thing to do, I chose the second.
So here is my javascript solution. The good thing is that it doesn't hijack any common events, so you can still continue to use your "onresize" or "onload" events in any way you like. Also, for the sake of speed I restricted this feautre to "DIV" objects with absolute positioning (since that's what you'd use most often for screen layout), but you can easily make it applicable to all objects (see comment in the script).
Instructions for use:
1. Download the script from http://erideon.net/fileshare/iefix.js
2. Include following line into your <header> section
That's it. It's tested, but feel free to let me know if you spot anything weird.Code:<script language="JavaScript" src="myDownloadFolder/iefix.js"></script>
).
Bookmarks