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

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

CommentFileSizeAuthor
#26 lightbox2-6.11-css3-validation.patch295 bytesattheshow
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

xG3n1uS’s picture

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 ???

stella’s picture

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

Zielu’s picture

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?

TheresaB-1’s picture

It seems I made duplicate issue with my post http://drupal.org/node/453512 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?

daemon’s picture

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>

stella’s picture

Yes it only affects the position of the loading icon

daemon’s picture

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.

hefox’s picture

Additional validation error

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

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

grn’s picture

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.

LEalex’s picture

Can anyone confirm (#9)?

[EDIT]

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

grn’s picture

Hmm, try the following.

For IE 4-6:

* html #loading {
  left: 0%;
}

And IE 7


*+html #loading {
left: 0%;
}

Not tested though...

source: http://en.wikipedia.org/wiki/CSS_filter

Pomliane’s picture

Subscribing.

PI_Ron’s picture

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

pumpkinkid’s picture

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

matteogeco’s picture

Subscribing.

vkr11’s picture

subscribe, break the theme in IE

dazweeja’s picture

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.

yan’s picture

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).

yan’s picture

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.

Balbo’s picture

subscribing.

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

John Kenney’s picture

Subscribing.

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.

enkara’s picture

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

dazweeja’s picture

@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?

alexbk66-’s picture

subscribing

yukare’s picture

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

attheshow’s picture

Version: 6.x-1.9 » 6.x-1.11
FileSize
295 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.

Prancz_Adam’s picture

Subscribe.

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.