CSS warnings when I inspect element

RapidWeaver Classic General
1

Hi can you helpI have 4 of these warnings on my site I have just listed the one as they all seem to be the same

Invalid CSS property declaration at* consolidated-0.css:5:7709
.fa-rotate-90 {
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg)
}

  • 10 other warnings as follows
    Unexpected CSS token: : font-awesome.min.css:4:1801
    }

.fa-rotate-90 {
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1); this line is highlighted
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg)
}

2

Sorry when I went bacck to double check what was highlited on the first error it read as follows with the unexpected token as * zoom: 1:
/* Grid HTML Classes */
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 62.5em;
* zoom: 1;
}

3

Nothing to worry about there, modern browsers will indicate an error as zoom is not officially part of the CSS specification and is not standardised. It is there to provide support for older versions of internet explorer (6 & 7) which do support it.

Zoom is a very primitive version of the CSS scale function, but without the ability to set origins of the scaling. Don’t worry about the error, it won’t affect your page rendering. Modern browsers will ignore it - although report its presence.

4

To give you a few more details:

* zoom: 1;

is a CSS property intended to help older versions of Internet Explorer (e.g. IE7 and less) render pages correctly. If you search online for ‘IE haslayout’ you’ll find decades-worth of documentation (like this) about it! In a nutshell, it was used to tell IE that an element existed on a page, even if said element contained no content. Otherwise IE would quite possibly ignore and not render the element at all - which means you could have lost padding, margins, floats, borders or backgrounds critical to the page design and layout. Because it was used so extensively a few years back, it is second nature for some developers to still include it in their CSS. However it is not really an error as such, and can be ignored. Newer versions of Internet Explorer don’t need it.

The other errors you see might be the result of browser prefixes:

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);

You will notice how each of those properties starts with ‘-’ and the abbreviated name of the web browser. This was done because CSS3 code was treated as an experimental feature by a lot of web browsers. This is less common nowadays for certain CSS features, but is still needed for others. Again it can be safely ignored.

And this code:

filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);

Filter itself is a valid property (although it is nearly always prefixed.) However in this instance the value of ‘progid: DXImageTransform.Microsoft.BasicImage(rotation=1);’ is a specific hack for Internet Explorer, hence the error. Again it can be safely ignored and should not cause any other issues in the page.

-Will.

1 Like
5

Many Thanksto you for your rapid response:wink: