Valid CSS
psynaptic - March 25, 2008 - 16:17
| Project: | Thickbox |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
Description
Validating the thickbox.css file gives the errors below. How many of these can be placed in conditional comments? Is it possible to have a fully valid thickbox?
Sorry! We found the following errors (15)
URI : /sites/all/modules/thickbox/thickbox.css
29 #TB_overlay Parse Error opacity=75)
30 #TB_overlay Property -moz-opacity doesn't exist : 0.75
31 #TB_overlay Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.75
38 * html #TB_overlay Value Error : height Lexical error at line 38, column 81. Encountered: "?" (63), after : "" ? document.body.scrollHeight : document.body.offsetHeight + 'px');
39 * html #TB_overlay Value Error : height Parse error - Unrecognized }
55 * html #TB_window Value Error : margin-top Lexical error at line 55, column 105. Encountered: "&" (38), after : "" && document.documentElement.scrollTop | document.body.scrollTop) + 'px');
56 * html #TB_window Value Error : margin-top Parse error - Unrecognized }
127 * html #TB_load Value Error : margin-top Lexical error at line 127, column 105. Encountered: "&" (38), after : "" && document.documentElement.scrollTop | document.body.scrollTop) + 'px');
128 * html #TB_load Value Error : margin-top Parse error - Unrecognized }
137 #TB_HideSelect Parse Error opacity=0)
138 #TB_HideSelect Property -moz-opacity doesn't exist : 0
139 #TB_HideSelect Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0
146 * html #TB_HideSelect Value Error : height Lexical error at line 146, column 81. Encountered: "?" (63), after : "" ? document.body.scrollHeight : document.body.offsetHeight + 'px');
147 * html #TB_HideSelect Value Error : height Parse error - Unrecognized }
154 #TB_iframeContent Property _margin-bottom doesn't exist : 1px
#1
After moving all the hacks to a conditional stylesheet for IE6 we're left with the following:
Parse Error opacity=75)
Property -moz-opacity doesn't exist : 0.75
Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.75
I removed them but it stops the overlay from being transparent. I don't know any work around for this. It seems like lightbox2 also has these properties but still works if you remove them.
#2
I'm also interested in solution of this Issue
#3
I ended up using Lightbox2 for the strict client. I removed the hacks to a conditional stylesheet and deleted the opacity stuff. Seemed to work just fine without it.
Still, I love thickbox and would love to be able to use it for those projects where clients need 100% valid CSS.
#4
Yea please move the hacks to a conditional css file and just get rid of the first 2 errors
I don't think that the 3rd error is a problem because it is not an error but css3
I am trying to start a web design company and want my site to have valid css! since I am using that as a selling point :) {dont want to be a css hypocrite} ha ha
#5
Ps
Thick box rocks
THANKS soooo much :)
#6
Hi– Thanks for these posts... but... 2 Qs:
1. Which hacks – can you post which styles should go in the IE6 conditional stylesheet?
2. And – has anyone found a solution for the remaining errors in psynaptic's first comment above?
Thanks in advance–
:) Scott
#7
A separate thickbox_fix-ie.css with conditional comments would be good. The problem is how to add it automatically from a module. You can't use the standard drupal_add_css().
I guess you could insert it with drupal_set_html_head() but that feels a bit crud.
What do you think?
#8
I know it's a holiday in the us, but just thinking this is kinda important for others besides myself
also... going out on a limb here... perhaps the priority mi8 be higher than 'minor'?
:) Scott
#9
I found some suggestions: http://matteogallinucci.it/web/2008-02-04/thickbox-css-code-validation-f...
But I agree with scottrigby, priority should be higher than minor...
#10
I found a solution to fix the css errors that seems to work perfectly, just follow these steps
1. Download the plugin here: http://www.contezero.net/sites/contezero/index.php/2008/12/14/thickbox-fix-plugin/
2. Upload the files within the zip file to your thickbox module folder (note: this will replace the thickbox.css file in the module folder so make sure you back it up before uploading)
3. add the following line to your thickbox.module file at the end of the _thickbox_doheader() function: drupal_add_js($path .'/tb_css_fix.js'); // fixes css errors
<?php
function _thickbox_doheader() {
...
if (variable_get('thickbox_auto', 0) && module_exists('image')) {
drupal_add_js(array('thickbox' => array('derivative' => variable_get('thickbox_derivative', 'preview'))), 'setting');
drupal_add_js($path .'/thickbox_auto.js');
}
drupal_add_js($path .'/thickbox.js');
drupal_add_js($path .'/tb_css_fix.js'); // fixes css errors
}
?>
That's it
I've tested this in ie6/7 and Firefox and it works fine, also I'm using version 6 of Drupal so I'm not sure if this fix will work in version 5 but I see no reason why it shouldn't.
#11
Works like a charm on the Toronto Yoga Guide site. Thanks, Vivian!
#12
Works like a charm on the Toronto Yoga Guide site. Thanks, Vivian!
#13
Thanks for your contribution! But could you tell us for which Thickbox version this patch was produced?
I'm using thickbox 6.x-1.2 and applied your patch. Now there's a javascript error in Firefox's error console:
Error: TB_HEIGHT is not definedSource File: http://localhost/sites/all/modules/thickbox/tb_css_fix.js?4
Line: 52
The error goes away if I insert the line below at the start of thickbox.js:
var TB_HEIGHT;... but I'm not sure if this is the right solution.
Also, a CSS error appears when I open a thickbox image:
Warning: Error in parsing value for property 'margin-top'. Declaration dropped.Source File: http://localhost/pt-br/empinando_fotografias
Line: 0
On the Internet Explorer, now there is the following error:
Line: 53Char: 13
Error: Invalid argument.
Code: 0
URL: http://localhost/pt-br/empinando_fotografias
Any suggestions to fix these problems?
#14
Thickbox for Drupal 6 has now a separate CSS file for Internet Explorer.
#15
Automatically closed -- issue fixed for 2 weeks with no activity.
#16
Could the IE stylesheet be made conditional?
#17
whoops, sorry about the .info fuzz.