19/7/2008 UPDATE
The code isn’t valid anymore. Read the comments.
In Thickbox css code there are some hacks that doesn’t validate the code (only css, rather xhtml is valid).
Invalid code is javascript inline css document. So, I changed invalid code with a js function call. Take an example:
* html #TB_overlay { /* ie6 hack */
position: absolute;
/*height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’); NOT VALID*/
height: expression(fixHeight(document.body.scrollHeight, document.body.offsetHeight)); //VALID
}* html #TB_window { /* ie6 hack */
position: absolute;
/* margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + ‘px’); NOT VALID */
margin-top:expression(fixMarginTop(this.offsetHeight,document.documentElement,document.body.scrollTop)); //VALID
}
So substitute expression inline in css file with calls to fuctions externally defined, and load the following file whenever you’re using thickbox in your site:
expressions.js:
function fixHeight(scrollHeight, offsetHeight)
{
return (scrollHeight > offsetHeight ? scrollHeight : offsetHeight + ‘px’);
}
function fixMarginTop(offsetHeight,documentElement,scrollTop)
{
return (0 - parseInt(offsetHeight / 2) + (TBWindowMargin = documentElement && documentElement.scrollTop || scrollTop) + ‘px’);
}
To use Thickbox now you need these loadings:
<script src="/lib/thickbox/jquery.js" type="text/javascript"></script>
<script src="/lib/thickbox/thickbox.js" type="text/javascript"></script>
<script src="/lib/thickbox/expressions.js" type="text/javascript"></script>
<style type="text/css"> @import "/lib/thickbox/thickbox.css"; </style>
Download Thickbox 3.1 editated sources:
thickbox.css (editated)
expressions.js (added)
Comments
Thanks a lot!!
I have spent 3 hours on it.
Moreover, in my case the original code returned incorrect document.body.scrollHeight. I do not know why. But after your patch it works perfect! Thank you again!
I don’t quite understand how you’re doing this. Things still aren’t validating correctly on the W3C CSS validator for me.
Hi Jods, maybe you didn’t patch it well, or you’re using another validator…what’s the site where you use it? And which validator do you use?
Can you post the files in a zip? I do not understand
Looks like someone came up with an alternative:
Smoothbox is the Mootools conversion of Thickbox, a script running on JQuery.
Update 16/08/2007 : Now Smoothbox uses only 100% W3C Valid CSS 
Opacity is now set with Javascript and not in CSS. An IE CSS hack has been updated to use * html instead of _attribute.
Hi Leo, thanks for your advice; anyway I suggest to choose a library by considering features and the base framework you’re already using.
Rather than spend a bunch of time trying to fix the validation issue myself I did a Google search and immediately found your fix.
Unfortunately it seemed to only work about 50% as it cut the errors from 26 to 12.
Any idea why this might be?
Hi Phil, please post the url of your site and let’s see the reason.
Sorry about that…here you go.
Damn! You’re right…I don’t know why some months ago validation was correct and now it’s not. Maybe they change validation rules (probably now are stricter) and I think there’s no way to fix them. Problems are for browser specific attributes, and we need them…so it can’t be valid at all.
Anyway I don’t think it’s a big problem, because they aren’t really errors, just they aren’t w3c valid.
Dear all, I just released a WordPress plugin that fix Thickbox CSS validation problem. You can find it at the following url: http://www.contezero.net/sites/contezero/index.php/2008/12/14/thickbox-fix-plugin/
At the same page, you can download a .zip file with an alternative CSS file and a Javascript that you can use to fix the problem if you don’t use WordPress.
cheers
I had an interesting result.
Everthing was working well, but for some reason the the original unvalidated version was adjusting my CSS positioning in a slightly wrong way.
I searched and found this, and immediately it validated.
However, the image then loads with the center at the far bottom left corner.
Not sure why this happened.
Your download fails validation. What’s all of this about?
Feed Rss
