For some reason when I run Css lint with Rhino I get the following errors:
I'm working with:
Windows server Server 2008
Visual Studio 2012 (MVC 4)
Java version "1.7.0_21"
rhino version 1_6R7
csslint-rhino.js from this url: "https://raw.github.com/stubbornella/csslint/master/release/csslint-rhino.js
My elements look like this:
.body {
}
.testelement {
}
.loadingIndicator {
width: 16px;
height: 16px;
background-image: url('/images/loadingIndicator.gif');
}
It seems some kind of encoding issue, but I can't seem to figure out what the problem is.
I seem to have found the problem myself.
In Visual Studio 2012 the files are saved as UTF-8. Apparently CSS lint can't handle this encoding. UTF-8 without BOM seems to work without problems though.
Related
I am unable to get a Grails 2.5.2 application using the resources plugin to handle the cache-busting change made to CKEditor. The resources plugin is configured as follows:
grails.resources.adhoc.patterns = ['/js/*', '/images/*', '/css/*', '/plugins/*', '/thirdparty/*', '/templates/*']
grails.resources.adhoc.includes = ['/js/**', '/images/**', '/css/**', '/plugins/**', '/thirdparty/**', '/templates/**']
The CKEditor code is placed under app-dir/web-app/thirdparty/ckeditor and is currently at version 4.5.9. The cache-busting change was made in 4.5.5, and version 4.5.4 works perfectly with grails resources.
I get the following error in the console when running the app with 4.5.9:
GET resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe net::ERR_UNKNOWN_URL_SCHEME
It seems that the resources plugin is not coping well with values in ckeditor's editor.css file (a file served by the app points to app-dir/thirdparty/ckeditor/skins/moono/editor.css?t=G4CD as http://localhost:8080/app-dir/static/thirdparty/ckeditor/skins/moono/editor.css?t=G4CD). If I look at this file directly, it contains the following for the icons.png and icons_hidpi.png files, indicating that the resources plugin is incorrectly replacing the image file link (all but the first, actually) with a "resource:/..." url that shouldn't need to be there, and hence the console error. Curiously, it is only the icons.png and icons_hidpi.png files with their t parameter that get changed in this manner, other image files in the same editor.css file are left alone.
.cke_button__bold_icon {background: url(icons.png?t=a35abfe) no-repeat 0 -0px !important;}
.cke_button__italic_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -24px !important;}
.cke_button__strike_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -48px !important;}
.cke_button__subscript_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -72px !important;}
If I add the following configuration, the app runs and displays perfectly.
grails.resources.processing.enabled = false
If I use
grails.resources.mappers.cssrewriter.excludes = ['/thirdparty/ckeditor/skins/moono/**']
in an attempt to prevent resources from modifying ckeditor's editor.css file, nothing seems to change.
What can I do? I can't leave ckeditor at 4.5.4, as there is an interaction with it that I'm trying to fix. I'm already using the same configuration as recommended in another post, but that does not fix the problem. Disabling css rewriting altogether just breaks other plugins.
The eventual solution (recommended by a colleague) is to exclude the specific CSS file(s) from being processed by grails resources:
resource url:"thirdparty/ckeditor/skins/moono/editor.css", exclude: "*"
This avoids affecting other files that were either unaffected by the upgraded CKEditor, or benefited from the processing done by grails resources.
I am trying to debug a crashing application in Microsoft Edge, but it gives the friendly error page:
This page is having a problem loading
We tried to load this page for you a few times, but there is still a problem with this site. We know you have better things to do than to watch this page reload over and over again so try coming back to this page later.
In internet explorer there is a way to turn off the friendly error messages. Is this also possible in Microsoft Edge? I'd like to know on which line of code the problem occurs.
It seems there are none at the moment. You can use the F12 developer tools for debugging though. The friendly page includes the actual HTTP response code so you can have an idea. Also, if you require more details you can check the full details on the request/response using the F12 Network tool to get the data the server is responding with.
You are probably affected by this unclosed bug.
No easy way to fix it right now, the not friendly error message will probably not help much (as you are not getting a server side HTTP error, is just the browser that raise an error and truncate the communication).
On the other hand the developer tool will not help also: Edge "smartly" close automatically it when the error happens and if you reopen the history is empty (no way to keep it, tried all of the buttons).
I have this issue on a site I'm developing but I'm not able to understand what's happen.
EDIT - after a long time I fixed this issue in my environment. Unluckily I'm pretty sure this will not help too much other devs because the bug seems to happen for a lot of different reason, but still... that's my usecase.
What was freezing my site was a combination of CSS media-queries (follow the less used):
#media (min-width:calc(#screen-mobile-size + 1px)) {
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
}
...and few lines below...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
I tested a lot of combination but there's only one rule: I can't provide both media queries, it doesn't matter what there's inside them! It simply break the browser.
In my case the fix was quite easy: just preventing the first CSS rule to be embedded inside a media query, so...
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
// ...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
When you see that, try hitting F12 and in debugger tab, setting break-on-all-errors. When you refresh, the last one it breaks on before the page reloads for some odd reason and triggers that error page, is likely the thing triggering some obscure bug.
You will likely find that Edge doesn't handle jQuery("someselector:visible") and refreshes, yet it does work with jQuery("someselector").filter(":visible"), but that's likely just an obscure bug in old jQuery 1.x.
I'm completely stumped - what am I missing?
I have a LESS file called Main.less - and VS 2013 automatically generates Main.min.css whenever I save it.
The CSS generated is fine - no errors. When I copy the generated CSS to my Style.css (to verify) it is applied correctly.
I bundle the Main.min.css generated from the LESS file via the usual bundleconfig along with other css files (mainly my bootstrap and site css).
When I run the site, I can see the styles in the referenced bundled source - but the style is not applied! What am I missing?
(here is the .LESS)
#color1: #FFA114;
#color2: #69b1fa;
#std_border: 2px;
.rounded {
border-radius: 10px;
}
.sel_1 {
.rounded;
border: #std_border solid #color1;
}
(here is the .css as it appears in the minified bundle on the browser)
.rounded{border-radius:10px}.sel_1{border-radius:10px;border:2px solid #ffa114}
I can only imagine something is wrong somewhere so that the browsers (latest Chrome and IE) don't even apply the styles. No idea what...
EDIT: UPDATE:
I also referred the generated min.css directly
<link href="/Content/Main.min.css" rel="stylesheet" />
and on browser-> view source -> click on the .css you see the following
.rounded{border-radius:10px}.sel_1{border-radius:10px;border:2px solid #ffa114}.sel_2{border-radius:10px;border:2px solid #ffa114;border-color:#69b1fa}.asel_1{border-radius:10px;border:2px solid #ffa114;border-style:dashed}.asel_2{border-radius:10px;border:2px solid #ffa114;border-color:#69b1fa;border-style:dashed}.map_sel{border:3px double #69b1fa}.line{border-bottom:2px #ffa114 solid;padding:10px}
And the styles are still not applied!
In my grails application I am using the spring-security-core:1.2.7.3 plugin with the famfamfam:1.0.1 plugin.
When I click on a link that takes me to the web application (and I previously selected the rememberme check box) it takes me to a secured page but no famfamfam images are displayed. In Firefox I can see the following error:
"NetworkError: 404 Not Found - http://localhost:8080/static/plugins/famfamfam-1.0.1/images/icons/user_suit.png;jsessionid=AB8FFF32A22F98573537A965694936AC"
Is there any way that I can prevent the 'jsessionid' from being appended to images?
Thanks!
See this link for a response from the plugin owner: https://github.com/xiaochong/zkui/issues/118.
The issue seems to relate to the resources plugin.
My workaround was to use a blank image in the zk item:
`<z:menuitem label="Home" height="80px;" top="40px;"
href="${createLink(uri: '/')}" image="/images/blank.png" class="menu_house"/>`
And then use a class to add the menu image:
.menu_house {
background-image: url("../images/house.png");
background-repeat: no-repeat;
background-position: left center;
}
I hope that helps to save someone time in the future.
I use dotless in my ASP .Net MVC application. It compiles .less files good. but if I use Mixins functions in my .less file, error me that "Resource interpreted as Stylesheet but transferred with MIME type text/plain" . If I remove Mixins function from my .less file, everything works fine.
What's my fault?
I use ASP.Net MVC 3 on Visual Studio 2010, Windows 7 (IIS 7).
Edited:
.LESS Input
body
{
padding: 0;
margin: 0;
}
.border-all-around (#defaultBorder: 1px, #defaultColor: black)
{
border: #defaultBorder solid #defaultColor;
}
.MyStandardBox
{
.border-all-around;
}
a
{
color: #12aee8;
text-decoration: none;
}
Output:
body
{
padding: 0;
margin: 0;
}
Result after Maxins function truncated!
"Resource interpreted as Stylesheet but transferred with MIME type text/plain"
I'm not sure if that would be of any help, but I got this error many times when using Cassini- which doesn't handle mime types very well.
Are you using IIS 7 that is bundled with windows or maybe cassini starts?
Have you tried IIs Express maybe?
If that is of no help to you, just ignore it.
Problem solved.
I reference to dotless.Core that its version is 1.0.0.3. I replace it by newer version (1.3.0.0) and the problem solved.