WordPress.org

Ready to get started?Download WordPress

Forums

jQuery Colorbox
Invalid CSS (4 posts)

  1. Gemma Wild
    Member
    Posted 1 year ago #

    Hi

    Love this plugin but the following code invalidates CSS:

    .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight

    Please could you either remove or fix this?

    Thanks
    Gem

    http://wordpress.org/extend/plugins/jquery-colorbox/

  2. tzdk
    Member
    Posted 1 year ago #

    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 http://breakthroughdesign.com/transparent-images-ie-using-pngs/76

    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.
      See: http://jacklmoore.com/notes/ie-transparency-problems/
    */
    .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 http://csslint.net/ 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?

  3. Gemma Wild
    Member
    Posted 1 year ago #

    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.

    http://www.hobo-web.co.uk/official-google-prefers-valid-html-css/

    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: http://jigsaw.w3.org/css-validator/
    HTML Validator: http://validator.w3.org/

  4. tzdk
    Member
    Posted 1 year ago #

    I am not developer but CSS comes from Colorbox not this WP plugin. http://www.jacklmoore.com/colorbox

    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" http://www.impressivewebs.com/dropping-ms-vendor-prefixes-ie10/ 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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic