Posted by Zielu on January 23, 2009 at 8:15am
| Project: | Lightbox2 |
| Version: | 6.x-1.11 |
| Component: | User interface |
| Category: | bug report |
| Priority: | minor |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
File: lightbox2/css/lightbox.css
Line: 43
Fragment: *left: 0%;
My suggestion is to delete this line to avoid validator warning.
Comments
#1
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 ???
#2
It will prevent the lightbox appearing in the correct position in IE.
#3
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?
#4
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.6I 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;
So now my question is what is
#overlay_default {opacity: 0.6;
#5
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>#6
Yes it only affects the position of the loading icon
#7
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.
#8
Additional validation error
262 #lightboxImage Property -ms-interpolation-mode doesn't exist : bicubicThis property was introduced in #419204: IE image resizing patch
#9
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.
#10
Can anyone confirm (#9)?
[EDIT]
This does not work, firefox used left:0%...
#11
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
#12
Subscribing.
#13
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
#14
Does anyone know if this * issue causes problems with css optimization? Trying to isolate an issue for a friend of mine...
#15
Subscribing.
#16
subscribe, break the theme in IE
#17
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.
#18
I also get the errors with
*left: 0%;andopacity: 0.6;. #9 solves the first one. Deleting the second one makes the loader appear on the left side (in Firefox).#19
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.#20
subscribing.
Anyone can answer #4 asking what browser is
opacity: 0.6;for?#21
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.
#22
The same errors as 21. Is anyone able to give instructions to solve them in the most used browsers? Thank you!
#23
@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?
#24
subscribing
#25
If someone provides a patch for this, i can commit.
#26
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.