CSS validation.

[m.kojak.s]

Hi, I've used the phoca gallery (plug-in, components, and modules) in a joomla website, and it all works pretty good. However, if I try to validate the css code with W3C, it fails with many errors.

below copy of some error messages. Any idea? or help?


thanks,
m.Kojak.s

Code: Select all

Sorry! We found the following errors (63)
URI : http://www.artworldnorth.com/components/com_phocagallery/assets/js/jak/lightbox-slideshow.css
2       .image-browser-slideshow-pause Property _background doesn't exist : none none
2       .image-browser-slideshow-pause attempt to find a semi-colon before the property name. add it
2       .image-browser-slideshow-pause Property progid doesn't exist : DXImageTransform DXImageTransform
2       .image-browser-slideshow-pause Parse Error DXImageTransform.Microsoft.AlphaImageLoader(src='img/...
2       .image-browser-slideshow-pause Parse Error ;}
3       .image-browser-slideshow-play    Property _background doesn't exist : none none
3       .image-browser-slideshow-play    attempt to find a semi-colon before the property name. add it
3       .image-browser-slideshow-play    Property progid doesn't exist : DXImageTransform DXImageTransform
3       .image-browser-slideshow-play    Parse Error DXImageTransform.Microsoft.AlphaImageLoader(src='img/...
3       .image-browser-slideshow-play    Parse Error ;}
4       .image-browser-slideshow-play:hover      Property _background doesn't exist : none none
4       .image-browser-slideshow-play:hover      attempt to find a semi-colon before the property name. ad...
4       .image-browser-slideshow-play:hover      Property progid doesn't exist : DXImageTransform DXImageT...
4       .image-browser-slideshow-play:hover      Parse Error DXImageTransform.Microsoft.AlphaImageLoader(s...
4       .image-browser-slideshow-play:hover      Parse Error ;}
URI : http://www.artworldnorth.com/components/com_phocagallery/assets/js/jak/lightbox-vertical.css
10      .lightBox div.image-browser-root         attempt to find a semi-colon before the property name. ad...
10      .lightBox div.image-browser-root         Property progid doesn't exist : DXImageTransform DXImageT...
10      .lightBox div.image-browser-root         Parse Error DXImageTransform.Microsoft.AlphaImageLoader(s...
10      .lightBox div.image-browser-root         Parse Error ;}
13      div.image-browser-root attempt to find a semi-colon before the property name. add it
13      div.image-browser-root Property progid doesn't exist : DXImageTransform DXImageTransform
13      div.image-browser-root Parse Error DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.png',...
13      div.image-browser-root Parse Error ;}
18      .lightBox .image-browser-prev    Property _background doesn't exist : none none
18      .lightBox .image-browser-prev    attempt to find a semi-colon before the property name. add it
18      .lightBox .image-browser-prev    Property progid doesn't exist : DXImageTransform DXImageTransform
18      .lightBox .image-browser-prev    Parse Error DXImageTransform.Microsoft.AlphaImageLoader(src='img/...
18      .lightBox .image-browser-prev    Parse Error ;}
19      .lightBox .image-browser-prev:hover      Property _background doesn't exist : none none
19      .lightBox .image-browser-prev:hover      attempt to find a semi-colon before the property name. ad...
19      .lightBox .image-browser-prev:hover      Property progid doesn't exist : DXImageTransform DXImageT...
19      .lightBox .image-browser-prev:hover      Parse Error DXImageTransform.Microsoft.AlphaImageLoader(s...
19      .lightBox .image-browser-prev:hover      Parse Error }
20      .lightBox .image-browser-next    Property _background doesn't exist : none none
20      .lightBox .image-browser-next    attempt to find a semi-colon before the property name. add it
20      .lightBox .image-browser-next    Property progid doesn't exist : DXImageTransform DXImageTransform
20      .lightBox .image-browser-next    Parse Error DXImageTransform.Microsoft.AlphaImageLoader(src='img/...
20      .lightBox .image-browser-next    Parse Error }
21      .lightBox .image-browser-next:hover      Property _background doesn't exist : none none
21      .lightBox .image-browser-next:hover      attempt to find a semi-colon before the property name. ad...
21      .lightBox .image-browser-next:hover      Property progid doesn't exist : DXImageTransform DXImageT...
21      .lightBox .image-browser-next:hover      Parse Error DXImageTransform.Microsoft.AlphaImageLoader(s...
21      .lightBox .image-browser-next:hover      Parse Error }
22      .lightBox .image-browser-prev-disabled Property _background doesn't exist : none none
22      .lightBox .image-browser-prev-disabled attempt to find a semi-colon before the property name. ad...
22      .lightBox .image-browser-prev-disabled Property progid doesn't exist : DXImageTransform DXImageT...
22      .lightBox .image-browser-prev-disabled Parse Error DXImageTransform.Microsoft.AlphaImageLoader(s...
22      .lightBox .image-browser-prev-disabled Parse Error }
23      .lightBox .image-browser-next-disabled Property _background doesn't exist : none none
23      .lightBox .image-browser-next-disabled attempt to find a semi-colon before the property name. ad...
23      .lightBox .image-browser-next-disabled Property progid doesn't exist : DXImageTransform DXImageT...
23      .lightBox .image-browser-next-disabled Parse Error DXImageTransform.Microsoft.AlphaImageLoader(s...
23      .lightBox .image-browser-next-disabled Parse Error }
24      .lightBox .image-browser-close Property _background doesn't exist : none none
24      .lightBox .image-browser-close attempt to find a semi-colon before the property name. add it
24      .lightBox .image-browser-close Property progid doesn't exist : DXImageTransform DXImageTransform
24      .lightBox .image-browser-close Parse Error DXImageTransform.Microsoft.AlphaImageLoader(src='img/...
24      .lightBox .image-browser-close Parse Error ;}
25      .lightBox .image-browser-close:hover     Property _background doesn't exist : none none
25      .lightBox .image-browser-close:hover     attempt to find a semi-colon before the property name. ad...
25      .lightBox .image-browser-close:hover     Property progid doesn't exist : DXImageTransform DXImageT...
25      .lightBox .image-browser-close:hover     Parse Error DXImageTransform.Microsoft.AlphaImageLoader(s...
25      .lightBox .image-browser-close:hover     Parse Error ;}

[Jan]

Hi, Phoca Gallery extensions (component, plugins, modules) have been made for people not for machines.

It means, in CSS there are used attributes to display all the feautures in different browsers. So if you want to display the gallery in non standard browsers like IE is, then you need to use non standard CSS attributes, etc.

So you can select between:

a) most of users will see the gallery site OK, SEO of the site will be OK

b) most of users will not see the gallery site OK, but your code will be OK in some machine and this means SEO will be not OK

I have choosen the a) If you need the b) then it needs to be customized in the code but I cannot give you any advice what needs to be changed there as I didn't do such modifications yet

The same is by external javascript libraries (where you get most of the "errors").

Jan

[m.kojak.s]

Jan,
Thank you for taking the time to respond so quickly,
I really appreciate it and fully understand the battle with Crappy IE, so far everything is working fine. and css validation, won't keep me awake, although I always try to keep the sites as clean as can be.

You're fee to list www.artworldnorth.com to your live sites using your modules.

You got my vote, and will motivate my client that is using the phoca galleries to donate some funds too.
Keep up the good work. Currently I'm a bit busy, but when more time is available I'll surf a bit more on your forum, maybe I can help here and there with some questions of other users.

Cheers,
m.kojak.s

[Jan]

great to hear it.

Jan

[Jan]

Hi, yes, using IE conditional comments is good method (it is used in Phoca Gallery) but it has a lot of problems.

- first, because of future, you never know which comment you should use. E.g. you will set that some rule will be used only for e.g. IE6 and IE7 but you don't know if the feauture will be OK in IE8. So if you will add the rule for IE8 and in IE8 it will be fixed and IE8 will follow standard rules, you have a problem. The same like if you will not add the rule for IE8. If this will be not fixed in IE8, than you have problem if the IE8 was not added.

Example. On many projects there was a rule for all IEs, but. It worked until there was IE6 and IE7 but then the IE8 came and it was fixed there. But because of the IE comments, there was used obsolete rule for IE8 and should not be

So by using IE conditional comments, you never know how the code will be worked in new version of IE - and if you have coded more than 100.000 lines of code it is very difficult to change it everywhere

- next problem is, we are using Joomla! and a lot of design settings can be set in parameters and becuase of it, some rules are set in style attributes. And there is the next problem. You cannot use conditional comments for style attributes

- etc ...