CSS Validator tells me this si NOT Correct! How to correct it?

HTML & CSS
1

The CSS Validator has a problem with the: 64px\9 and 10px\9

what is the correction ?

input.file { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); height: 54px; width /*\\**/: 64px\\9; margin /*\\**/: 0 0 0 -10px\\9 font-size: 8px; z-index: 200; } /* IE8 */

and this line below.: no-repeat left\9

.search-button strong { background: url(images/search-button.jpg) no-repeat left; background /*\\**/: url(images/search-button.png) no-repeat left\\9; padding: 1em 0 1em 5px; margin-right: 10px; cursor: pointer; }

all help greatly appreciated :slight_smile:

2

That’s because its not valid :slight_smile:

It’s an IE9 hack which would be better served using conditional comments to serve the alternate rules to IE9/8 using valid code rather than using invalid hacks that may indeed break should a new browsers think differently. Those IE8/9 hacks are notoriously unreliable as they don’t work on some properties and best avoided.

If you don’t want separate style sheets then use the class on the html approach and you can define alternative rules with the pre-fix.


<!--[if IE 6]>
     <html class="ie6">
<![endif]-->
<!--[if IE 7]>
     <html class="ie7">
<![endif]-->
<!--[if IE 8]>
     <html class="ie8">
<![endif]-->
<!--[if IE 9]>
        <html class="ie9">
<![endif]-->
<!--[if !IE]><!-->
        <html>
 <!--<![endif]-->

e.g.
.ie9 .test1 {width:200px}
.ie8 .test1 {width:199px}

Of course that does change specificity so you need to use it sparingly.

However, I would guess that maybe a change of style may fix the issue without hacks.

3

Hello Paul O’B, thank you for your reply.

so to fix the css lines do I remove the 9 ?

64px\9 and 10px\9

so 64px and 10px will that work ok ?

your help appreciated :slight_smile:

4

Yes the /9 at the end is a hack and all browsers that encounter the rule say “hey this isn’t right I’m getting out of here and leave the rule alone”. Ie9 (and IE8 if I remember correctly) incorrectly parse the rule as 64px and 10px and forget about the end bit. Therefore authors have used it as a way of passing styles only to those browsers.

If you use conditional comments (or the pre-fix trick) then you can use the valid rules instead.

5

Hello Paul O’B, thank you for your reply.

ok so I will remove the /9 and hopefully all will be ok :slight_smile:

the reason I asked is I have seen font size with 12px/18px in css rules

so wanted to check if I should be deleting the /9 or adding a px to the 9 /9px

…

if would look at this please, it is also a css validation problem:

Feature -webkit-min-device-pixel-ratio doesn't exist for media screen ) { select.mselect, select.mselect:hover { height: auto !important; } select, select:hover { height: 24px; line-height: 18px; padding-bottom: 0 !important; } }

your help appreciated :slight_smile:

6

That’s different altogether and is shorthand for the font-size followed by the line-heigh i.e. font-size/line-height.:slight_smile:

so wanted to check if I should be deleting the /9 or adding a px to the 9 /9px

Just normal as 64px.

if would look at this please, it is also a css validation problem:

Feature -webkit-min-device-pixel-ratio doesn't exist for media screen ) { select.mselect, select.mselect:hover { height: auto !important; } select, select:hover { height: 24px; line-height: 18px; padding-bottom: 0 !important; } }

your help appreciated :slight_smile:

None of the vendor prefixes are valid so you just have to ignore the errors/warnings for those. They do follow a valid construct but won;t validate through the validator. However you do need to use them these days so you just have to live with it.

7

Hello Paul O’B, thank you for your reply.

Great Errors reduced now :slight_smile:

yet I have a couple of zoom errors - Property zoom doesn’t exist : 1

#languages-menu li a { display: block; zoom: 1; padding: 0; line-height: 20px;	text-align: left; color: #444; font-weight: normal;}

and a couple of opacity=0 errors, and Sorry, the at-rule @-moz-document is not implemented.


/* start ajaxMultiFileUpload  */

#maincol { width: 100%; margin: 0 auto 0; }
@-moz-document url-prefix() {
input.file,  x:-moz-any-link, x:default { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); height: 54px; width: 54px; margin: 0 0 0 -20px; 
	font-size: 8px; z-index: 200; }/* FF3 */
input.file { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); height: 54px; width: 54px; margin: 0 0 0 -15px; font-size: 8px; z-index: 200; } /* FF2 */
}
input.file { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); height: 54px; width /*\\**/: 64px; margin /*\\**/: 0 0 0 -10px; font-size: 8px; z-index: 200; } /* IE8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
input.file { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); height: 54px; width: 54px; font-size: 8px; z-index: 200; margin-top: -14px; } /* SAFARI & Chrome */
}

what to do with these ?

your help appreciated :slight_smile:

8

zoom is a proprietary IE only property and not in the css specification (although I believe safari has support for it also) and won’t validate. It’s mainly used to put IE7 and under into “haslayout” mode to ensure consistent rendering. If you aren’t supporting IE7 and under then you can remove it but will likely break IE7 and under very badly. The only way to trick the validator is put it inside conditional comments and call the rules from there. However virtually no one does that these days as we all know why the rules is in the stylesheet and it will do no harm. Validation is merely a means to an end and not a bible. It’s there to point out potential problems but then its up to you to ignore them or not. It’s not a tool for clients to use to assess a site as that is too simplistic an approach.

and a couple of opacity=0 errors,

That looks like part of the IE filter code and IE filters are again invalid code and the only way to validate them is to remove them to conditional comments and hide from the validator. (unless it should have been ‘opacity:0’ which is valid (but not when part of the IE filter code).)

and Sorry, the at-rule @-moz-document is not implemented.


/* start ajaxMultiFileUpload  */

#maincol { width: 100%; margin: 0 auto 0; }
@-moz-document url-prefix() {
input.file,  x:-moz-any-link, x:default { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); height: 54px; width: 54px; margin: 0 0 0 -20px; 
	font-size: 8px; z-index: 200; }/* FF3 */
input.file { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); height: 54px; width: 54px; margin: 0 0 0 -15px; font-size: 8px; z-index: 200; } /* FF2 */
}
input.file { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); height: 54px; width /*\\**/: 64px; margin /*\\**/: 0 0 0 -10px; font-size: 8px; z-index: 200; } /* IE8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
input.file { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); height: 54px; width: 54px; font-size: 8px; z-index: 200; margin-top: -14px; } /* SAFARI & Chrome */
}

Yes that’s just more vendor prefixes which won’t validate but will do no harm as long as you undesrtand their use.

What some people do is to remove all the invalid rules and put them in a separate stylesheet so that al the main stylesheets validate and just this one stylesheet is invalid. That seems to satisfy clients who don’t know better and also shows that you realise they are invalid rules but needed for the page to display properly…

9

Hello Paul O’B, thank you for your reply.

ok good to understand all that, I will just leave it as is.

yes learning what is needing fixing, and what to leave alone,

your help, and sharing is greatly appreciated,

best wishes to you :slight_smile:

10