Support » Plugin: jQuery Colorbox » Invalid CSS

Viewing 3 replies - 1 through 3 (of 3 total)
  • Not an error but result of validator not approving of special IE code.

    Also check “behavior” vs. “_behavior”. Both for more special old IE code but last one apparently a hack to avoid issues with other browsers

    This is the chunk in colorbox.css you refer to I think

      The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
      when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
    .cboxIE #cboxTopLeft,
    .cboxIE #cboxTopCenter,
    .cboxIE #cboxTopRight,
    .cboxIE #cboxBottomLeft,
    .cboxIE #cboxBottomCenter,
    .cboxIE #cboxBottomRight,
    .cboxIE #cboxMiddleLeft,
    .cboxIE #cboxMiddleRight {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
      The following provides PNG transparency support for IE6
      Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.

    I only know CSSLint that take CSS validation seriously and still much output is debatable. No IDs policy is bad fit for many things, including common sense. But why you can enable/disable all tests via drop down arrow. Very good overall. What you use?

    Hi tzdk

    I didn’t mention anything about an error, I specified that it invalidates CSS markup.

    I’m fully aware that valid CSS & HTML is widely debated but most good web designers DO validate their code and consider it a serious and professional practice and I prefer to have that option.

    Perhaps you could offer users the option to use the default stylesheet that comes with the plugin or to use their own CSS. That way, the code from the plugins stylesheet can be copied to the main site stylesheet minus the invalid CSS code. Everyone’s happy!

    Widely used markup validators from the World Wide Web Consortium:

    CSS Validator:
    HTML Validator:

    I am not developer but CSS comes from Colorbox not this WP plugin.

    Well as said I would use CSS-Lint for CSS. Or try check/validate HTML5 BoilerPlate, Twitter Bootstrap or similar “authority” things and you will probably get in to a spin of who to guide you. Those validator services are not supreme court, or necessarily updated! = not relevant with everything. CSS Lint is updated, over and over. Not even sure about how updated as I think they still insist on IE10 prefixes which have been deprecated since last summer! And IE9 dont even know them so what is the point? Site is ultra conservative I think. ColorZilla also still use them. Dont believe all you see on internet. “Lots of stuff need updating” sure, in 1 year or so…. Until then you can say “invalid” all day long 🙂

    Apparently CSS Lint call red alert for the old IE6 hack I mentioned, _behavior, but if used like that to avoid issues with normal browsers it make sense even if invalid. Using a body/hmtl class would be better and probably why they declare “parsing error” or stupid hack.

    I actually dont use the plugin right now but have before and then I deregistered themes. Copied CSS to other file and removed stuff, like the IE6 chuncks. Nothing stops you from doing that. I am also pedantic with correctness – and hate fluff and more http requests than necessary. Speed is also a parameter.

    Choose a theme, lets say no. 3. Then you have that + 1 CSS file the Zoom part to get rid of.

    add_action ('wp_enqueue_scripts', 'dropColorboxCSS');
    function dropColorboxCSS() {
    wp_deregister_style('colorbox-css'); // jquery-colorbox-zoom.css file
    wp_deregister_style('colorbox-theme3'); // colorbox.css in theme3 folder

    One thing to remember is the /images/ folder under each theme. 3, or at the very least 3, calls to those files will need to be changed in your own CSS file. Change to absolute path or relative to own CSS file/folder.

    Also in other folder where jquery-colorbox-zoom.css is you see

    background: url("../images/zoom.png") no-repeat scroll 50% 50% transparent;

    So it will look for /images/ folder 1 level higher up. Wont match your own CSS so have to change path and/or placement of those images. Besides this it totally works and you can change/improve what you like.

    This info you can get out of /jquery-colorbox/includes/jquery-colorbox-frontend.php file. I think he use some variable for theme number but if you want no. 5 just change number in above snippet.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Invalid CSS’ is closed to new replies.