I have a really strange situation where the CSS images are not displayed after the site is deployed to Windows Azure.
The images are part of the project (all the files and sub-folder are included in the project)
All images have a build action of Content
I'm not using relative path, always use absolute path on my views /content/path/to/images, but on CSS there is relative path url(../img/image.png) but this should not be a problem.
Static files are OK (CSS and Javascript work correctly), except for the images not showing up.
I deployed using git, but even with the Publishing Wizard I get the same result.
The images are there if I request them with the full path. This is "unreal" ;)
I'm must be neglecting a key thing here, but can't find it.
Thanks for your time.
Edit:
The image work via the img tag. So only the CSS images, which make no sense, they are working correctly locally.
I guess I can share the link, so you can see this thing live ;)
http://receivably.azurewebsites.net
Look at the top left logo, nothing appear, here is the HTML and CSS (this was working well a couple of deplyment ago, and work fine locally.
<a class="brand" href="/">name</a>
In the CSS:
.navbar .brand {
display: block;
width: 180px;
height: 34px;
padding-top: 0;
padding-bottom: 0;
margin-top: 2px;
margin-left: 10px;
overflow: hidden;
font-size: 18px;
line-height: 600px;
color: #333;
background: url(../img/logo.png) no-repeat 0 0;
}
And if we request the file directly it's there: http://receivably.azurewebsites.net/content/site/img/logo.png
The CSS file is placed in /content/site/css and images on /content/site/img.
May I add that I'm now unable to git push. Only the publishing wizard work. I've having LOTS of problem with that website on Azure, my other 3 app work flawlessly.
I think your css bundler is breaking things.
Here's what I see in your bundled CSS from the homepage (I've de-minified it a bit):
.brand
{
display:block;width:180px;height:34px;padding-top:0;padding-bottom:0;margin-top:2px;
margin-left:10px;overflow:hidden;font-size:18px;line-height:600px;color:#333;
background:url(../img/logo.png) no-repeat 0 0
}
Notice:
background:url(../img/logo.png) which may not be correct from the CSS which is executing from /bundles/
It should say:
../content/site/img/logo.png
Or as you said /content/site/img/logo.png
This would explain why it works locally (non bundled) and even in prior deployments -- because bundling related code may have changed recently. This is a classic release-time issue and it's one reason why turning on bundling full time (not just in Release mode) is wise, even though it takes an extra 0.500 seconds at Compile time. :-)
Hope that helps.
Related
I have written the following css class in my Blazor WASM project from the standard template:
.edit-field {
input {
border-top: none;
border-left: none;
border-right: none;
outline: none;
display: block;
}
span {
font-size: 12px;
}
}
This is a .scss file.
I then import it to the main css file, which is loaded to page.
It seems hard to have it broken, but I get this:
If I take the properties out of the class in the same file, the issue doesn't appear and all works expectably.
I don't mean this or any other .scss file to be a css isolation style sheet.
Please help.
Actually, this is no blazor issue at all. It appears, css does not support nested styling originally and all my time using it, I exploited an scss feature. I installed and configured Web Compiler extension in my VS-19 and it started working as I wanted.
it's my first question here so i'm very excited :).
I moved recently from programing mvc-5/6 to asp.net core.
Now, i noticed when i debug my website i have several options:
-IIS
-SolutionName via cmd deployment
-Browse with
The funny thing is that when i deploy my web with IIS (F5) the browser doesn't get all my css references (which does not effect few of my privately cssed elements). But when i deploy it by the other 2 options i mentioned earlier it does work.
Now I've been searching a bit around for an explanation for that and find none.
Due to my lack of understanding in IIS i assume the problem is somewhere there and here are the following 2 questions:
1) Why are there such distinctions?
2) Does it matter eventually if the IIS doesn't respond as i expected when other debugging methods does respond correctly?
Thanks you!!!
A pic to show my code
.banner {
height: 350px;
width: 100%;
max-height: 50%;
max-width: 100%;
min-height: 20%;
min-width: 30%;
background-image: url('/ProfilePic/Profile.png');
background-size: cover;
}
I'd be careful here - it definitely does matter - as an answer for question 2.
When you switch from old MVC to core, you will realize that your "served" files go and lie in the wwwroot folder.
It is completely possible that you did not reference your CSS just right (as it differs from normal MVC's file structure). Also, be sure to use a relative path as opposed to an absolute one.
Have a look here:
Correct:
<link href="~/css/site-internal.min.css" rel="stylesheet" />
Incorrect:
<link href="~/wwwroot/css/site-internal.min.css" rel="stylesheet" />
<link href="http://localhost:5000/css/site-internal.min.css" rel="stylesheet" />
Could be that your problem is unrelated, but it is something to watch out for none the less.
EDIT
Your CSS's should definitely be able to load without regard to whichever way you run the program.
As an aside - the IIS option allows you to debug and step through your JS and could be quite useful.
What you want to do here is go into your browser dev tools (F12 most of the time), and go see if your CSS gets resolved correctly - you can continue once you know what your problem is.
Usually if something goes wrong in the process of loading CSS you wil get errors straight in the browser console
EDIT #2
Upon further perusal of your problem statement - I think it might be that your CSS is loaded correctly but you've got a problem with that image URL.
Please check the first answer here
The URL of the image inside a CSS file is relative to the path of the CSS file.
Therefore your solution will be something like this:
../ProfilePic/Profile.png
The .. moves up one level.
We have a page with a rich text editor. If the content being edited contains an image and the user is using Firefox and they have the Pinterest browser button installed, then the following HTML gets added to the end of the rich text content in the editor. You can see it in there using the Source button in the editor's toolbar and when the form is submitted, the added HTML gets included with it and sent to the server.
<p><span style="border-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font: bold 11px/20px "Helvetica Neue",Helvetica,sans-serif; color: rgb(255, 255, 255); background: rgb(189, 8, 28) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+PHBhdGggZD0iTTE0LjczMywxLjY4NiBDNy41MTYsMS42ODYgMS42NjUsNy40OTUgMS42NjUsMTQuNjYyIEMxLjY2NSwyMC4xNTkgNS4xMDksMjQuODU0IDkuOTcsMjYuNzQ0IEM5Ljg1NiwyNS43MTggOS43NTMsMjQuMTQzIDEwLjAxNiwyMy4wMjIgQzEwLjI1MywyMi4wMSAxMS41NDgsMTYuNTcyIDExLjU0OCwxNi41NzIgQzExLjU0OCwxNi41NzIgMTEuMTU3LDE1Ljc5NSAxMS4xNTcsMTQuNjQ2IEMxMS4xNTcsMTIuODQyIDEyLjIxMSwxMS40OTUgMTMuNTIyLDExLjQ5NSBDMTQuNjM3LDExLjQ5NSAxNS4xNzUsMTIuMzI2IDE1LjE3NSwxMy4zMjMgQzE1LjE3NSwxNC40MzYgMTQuNDYyLDE2LjEgMTQuMDkzLDE3LjY0MyBDMTMuNzg1LDE4LjkzNSAxNC43NDUsMTkuOTg4IDE2LjAyOCwxOS45ODggQzE4LjM1MSwxOS45ODggMjAuMTM2LDE3LjU1NiAyMC4xMzYsMTQuMDQ2IEMyMC4xMzYsMTAuOTM5IDE3Ljg4OCw4Ljc2NyAxNC42NzgsOC43NjcgQzEwLjk1OSw4Ljc2NyA4Ljc3NywxMS41MzYgOC43NzcsMTQuMzk4IEM4Ljc3NywxNS41MTMgOS4yMSwxNi43MDkgOS43NDksMTcuMzU5IEM5Ljg1NiwxNy40ODggOS44NzIsMTcuNiA5Ljg0LDE3LjczMSBDOS43NDEsMTguMTQxIDkuNTIsMTkuMDIzIDkuNDc3LDE5LjIwMyBDOS40MiwxOS40NCA5LjI4OCwxOS40OTEgOS4wNCwxOS4zNzYgQzcuNDA4LDE4LjYyMiA2LjM4NywxNi4yNTIgNi4zODcsMTQuMzQ5IEM2LjM4NywxMC4yNTYgOS4zODMsNi40OTcgMTUuMDIyLDYuNDk3IEMxOS41NTUsNi40OTcgMjMuMDc4LDkuNzA1IDIzLjA3OCwxMy45OTEgQzIzLjA3OCwxOC40NjMgMjAuMjM5LDIyLjA2MiAxNi4yOTcsMjIuMDYyIEMxNC45NzMsMjIuMDYyIDEzLjcyOCwyMS4zNzkgMTMuMzAyLDIwLjU3MiBDMTMuMzAyLDIwLjU3MiAxMi42NDcsMjMuMDUgMTIuNDg4LDIzLjY1NyBDMTIuMTkzLDI0Ljc4NCAxMS4zOTYsMjYuMTk2IDEwLjg2MywyNy4wNTggQzEyLjA4NiwyNy40MzQgMTMuMzg2LDI3LjYzNyAxNC43MzMsMjcuNjM3IEMyMS45NSwyNy42MzcgMjcuODAxLDIxLjgyOCAyNy44MDEsMTQuNjYyIEMyNy44MDEsNy40OTUgMjEuOTUsMS42ODYgMTQuNzMzLDEuNjg2IiBmaWxsPSIjYmQwODFjIj48L3BhdGg+PC9nPjwvc3ZnPg==") no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 0.85; z-index: 8675309; display: none; cursor: pointer; border: medium none; top: 520px; left: 1368px;">Save</span></p>
The embedded background image is the pinterest icon. This happens on both Windows and Mac, but only in Firefox. Does not happen in Chrome or Safari. I was unable to test IE11 because the button failed to install.
Is there a way to prevent plugins from modifying rich text editor content? Or, is there a way to tell the pinterest plugin specifically to stay out of the editor or even just the page?
The short answer is that you can't prevent a Firefox add-on from modifying your webpage, if the extension desires to do so. Firefox add-ons run with the privileges of the browser. Thus, they can have complete control over what is displayed, how it is displayed, or even if your page is displayed at all. Your question is, at its essence, the same as "Can I prevent the Firefox browser from displaying my page the way that Firefox wants to display it?"
You have to work with the fact that it is going to do whatever it is choosing to do. If you desire your website to work with the Firefox browser with this extension installed you must work around whatever it is that the extension is doing to your website.
There are a variety of possible strategies (not an all-inclusive list):
Contact Pinerest and inform them of the problem. It sounds like the add-on is causing harm to your website. This is probably not intentional. Have them file a bug. If it is affecting your site, it is probably
affecting others.
Have your server detect the additional HTML code in the input and just automatically remove it.
Experiment with different HTML structures for your webpage to try to find one that results in the extension putting the code somewhere it does not get included in the data sent to your server.
If it was me, I would take a good look at the source code for the Pinterest add-on. Like most Firefox add-ons, it is plain JavaScript. You should be able to determine the criteria that it is using to choose where to put the HTML code it is inserting. Once you know that, it should be reasonably easy to design your page such that the add-on does not interfere with something you care about. To save you a bit of searching, the URL for the add-on is, currently, here. You should use "Save Link As" to save that .xpi file to somewhere. Then change the .xpi file extension to .zip. You should then be able to extract all the files for the add-on from the package. It is a normal bootstrapped add-on.
I have the following CSS in my main.css file:
background-image:-moz-linear-gradient(top, #eeeeee, #aaaaaa) !important;
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#aaaaaa)) !important;
background-image:-webkit-linear-gradient(top, #eeeeee, #aaaaaa) !important;
background-image:-o-linear-gradient(top, #eeeeee, #aaaaaa) !important;
background-image:linear-gradient(to bottom, #eeeeee, #aaaaaa) !important;
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffaaaaaa', GradientType=0) !important;
Which keeps changing itself to:
background-image: linear-gradient(to bottom, #eeeeee, #aaaaaa) !important;
Why could this be happening? The selector is .navbar .nav which is defined in another CSS file too, the Bootstrap CSS file. Could it be that Visual Studio is automatically cleaning up duplicate definitions or something?
edit: It changes every few builds. I can't pinpoint what action is causing it to automatically change.
Those are browser based CSS tags:
This only works in mozilla:
background-image:-moz-linear-gradient(top, #eeeeee, #aaaaaa) !important;
Works in Chrome/Webkit based browsers:
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#aaaaaa)) !important;
background-image:-webkit-linear-gradient(top, #eeeeee, #aaaaaa) !important;
Actually this cross browser technique is somewhat deprecated in the release of CSS3. You need to find the corresponding CSS that works on the browser you are using.
It's not 'changing' just that, other CSS was ignored by the browser.
Have a look to see if there are any build events setup in Visual Studio. It's possible the project has been configured to run something like csstidy or a css minimizer that is attempting to cleanup duplicate properties.
Alternatively, if you're using source control (which I would hope you are), your source control may be configured to run a commit hook that does the same sort of thing. How that is configured will depend on the source control that you're using.
I wouldn't expect this to be a problem with a modern version of csstidy (or any other modern css optimising tool for that matter). However, if this is a project that you've inherited, it's possible it was setup some time ago with a tool that is now out of date.
I am applying border-radius on my layout and I having problems with IE 7 and IE8. I'm using the PIE.htc but I still can not do the compatibility works.
The code is:
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 0;
-moz-border-top-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
behavior: url(PIE.htc);
I'm testing in ieTester, can anyone help me?
if you use behavior: url(PIE.htc); then your Pie.htc should be in the same folder as your html page or master page.
your page's doctype should be XHTML or HTML5.
then my experience says its better to place the behavior code on top your css rule.
you better not use IE Tester as a trustful utility. It came up with a hand full of tools but not quite useful ones. its better to use IE 9, then change its browser and document mode in its developer tools. when you change them the whole page will reload in that mode. it even has quirk mode which is a complete total NIGHTMARE.
And if you can update your question with more facts about your code and browser.