File: lightbox2/css/lightbox.css
Line: 43
Fragment: *left: 0%;

My suggestion is to delete this line to avoid validator warning.

#26 lightbox2-6.11-css3-validation.patch295 bytesattheshow


It's very strange, I have Lightbox on two neraly similar websites.

Page1: CSS-Validation = OK
Page2: CSS-Validation = same as issue above !

What will happen, if I delete the line with *left: 0%; ???
What does this line do ???

It will prevent the lightbox appearing in the correct position in IE.

Hi Stella!

So why not use two CSS files, one named styles-ie.css and using it conditionally to avoid validator warnings in less problematic browsers?

It seems I made duplicate issue with my post I have since removed the *left: 0%; and that fixed that error with only this error remaining:
168 #overlay_default Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.6

I was also getting 200+ warnings in the W3C validator even of Drupal core module css files. But when I submitted each individually in the validator they showed now errors. So being inquisitive I commented out

#overlay_default {
  opacity: 0.6;
and now my site is completely valid and ALL of the warnings are gone.

So now my question is what is

#overlay_default {
  opacity: 0.6;
used to support what browsers?

It seems to only affect the position of the loader icon, could anyone confirm?

#loading {
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
  position: absolute;
  top: 40%;
  left: 45%;
  *left: 0%; /* does not validate */
#loadingLink {
  display: block;
  background: url(../images/loading.gif) no-repeat;
  width: 32px;
  height: 32px;

Applied to this piece of code:
<div id="loading"><a href="#" id="loadingLink"></a></div>

Yes it only affects the position of the loading icon

Do you think there is another way to achieve the desired result? Centered loader.
I tried but without any success, we could reach to an expert in CSS or a CSS forum if we can extract any parent elements that affect this.

Additional validation error

262  #lightboxImage  Property -ms-interpolation-mode doesn't exist :  bicubic

This property was introduced in #419204: IE image resizing patch

Fragment: *left: 0%;

If you wan't the IE css star hack use it in the proper way, like this:

#loading {
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
  position: absolute;
  top: 40%;
  left: 45%;
* #loading {
  left: 0%;

I did not test it, but it should work.

Thanks for your time.

Can anyone confirm (#9)?


This does not work, firefox used left:0%...

Hmm, try the following.

For IE 4-6:

* html #loading {
  left: 0%;

And IE 7

*+html #loading {
left: 0%;

Not tested though...



Im also getting validation issues with the lightbox module:

Sorry! We found the following errors (3)
URI : http://website/sites/all/modules/lightbox2/css/lightbox.css?W
43 #loading Parse Error *left: 0%;
44 #loading Parse Error }
168 #overlay_default Property opacity doesn't exist in CSS level 2.1 but exists in : 0.6 0.6

Does anyone know if this * issue causes problems with css optimization? Trying to isolate an issue for a friend of mine...


subscribe, break the theme in IE

I agree with #3 - use IE conditional comments and valid CSS in preference to invalid CSS hacks. You could argue that conditional comments are a bit hacky because only one vendor has implemented them but they a) mean that both your HTML and CSS validate, b) allow the dev to specifically target problematic IE versions, and c) won't break in the future (because of point b) whereas hacks like the star hack are much more fragile.

I also get the errors with *left: 0%; and opacity: 0.6;. #9 solves the first one. Deleting the second one makes the loader appear on the left side (in Firefox).

I don't know about the IE part, but in Firefox, using css from #11 and deleting opacity: 0.6; makes the css validate and work as intended.


Anyone can answer #4 asking what browser is opacity: 0.6; for?


Still getting CSS errors

25 #loading Parse Error ;*left:0%;
25 #loading Parse Error ;}
26 #lightboxImage Property -ms-interpolation-mode doesn't exist : bicubic bicubic

Balbo, every modern browser except Internet Explorer supports opacity, that part validates as CSS3.

The same errors as 21. Is anyone able to give instructions to solve them in the most used browsers? Thank you!

@enkara, comment #11 solves the first two errors and is valid CSS. Regarding the other two, it's more contentious as to whether CSS3 and vendor-specific properties are really "errors". If you don't consider using a CSS3 property an "error" then you would consider this "error" a limitation of the W3C CSS Validator. I choose to use conditional comments for <IE6 and IE7 - so I only see the CSS3 "error" which I can live with - but many people prefer CSS hacks.

@stella, is it possible to change the CSS to include #11 which validates?


If someone provides a patch for this, i can commit.

Version:6.x-1.9» 6.x-1.11
new295 bytes

Here's a patch for #11.

There's still the issue with the invalid code -ms-interpolation-mode: bicubic, but I'm not sure if that can safely be removed.


I'm working on make the css file valid, but any of my attempts case error in functionality.
I'm using Google Chrome now and the problematic *left: 0%; is necessary to work it correctly:-(

Anyway I have many-many problems with different drupal modules when I want to make valid websites.