I'm trying to debug a WordPress site and have been scouring through the custom CSS to find out why the site keep loading a background image that has since been deleted. This is appearing on every page as a 404 error.
Does anyone know how to reverse engineer this situation to isolate where it might be coming from?
<meta name="generator" content="Powered by Visual Composer - drag and drop page builder for WordPress."/>
<!--[if lte IE 9]><link rel="stylesheet" type="text/css" href="https://www.example.com/wp-content/plugins/js_composer/assets/css/vc_lte_ie9.min.css" media="screen"><![endif]--><!--[if IE 8]><link rel="stylesheet" type="text/css" href="https://www.example.com/wp-content/plugins/js_composer/assets/css/vc-ie8.min.css" media="screen"><![endif]--><style type="text/css" id="custom-background-css">
body.custom-background { background-image: url("https://example.com/wp-content/uploads/2016/03/8642451160_b0660b13a3_o.jpg"); background-position: left top; background-size: auto; background-repeat: repeat; background-attachment: scroll; }
</style>
<style>.fb_iframe_widget_lift {width: 100% !important; height: 100% !important;}</style><style></style>
I would suggest doing a search for 8642451160_b0660b13a3_o.jpg over the theme files and plugin files using grep or any similar utility to search for text in multiple text files.
If this doesn’t help, perform a search for 8642451160_b0660b13a3_o.jpg in the whole database using phpMyAdmin or similar tool. By looking at which database tables and records it was found it, you can usually track the plugin or the theme file it’s set in.
WordPress is very flexible, and allows to append a style to the header from practically any place in the code (for example, by using the wp_head action in almost any PHP file). So, the problematic code can be virtually anywhere! Doing a search for the filename in the files and in the database can usually help to track where the problem comes from.
I am having some issues with one of my html forms. It looks like because the select drop downs and the input text boxes are not the same size all my controls are misaligned in ie6. You can see that all the controls under selected date get pushed out of alignment more and more as we go down. This does not happen in firefox.
I am using yaml as my css framework and I thought that it would be covered but it doesn't seem to be. Can someone please give me an idea on how to make the controls the same size or give ma an idea on an alternative fix.
I've put the html for the form here.... http://pastebin.com/cVrVadQf
thanks
To fix this I just piggy backed onto yaml conditional css foe ie6. I added my own stylesheet as you can see below...
<!--[if lte IE 7]>
<link href="resources/css/custom-myer-ie6.css" rel="stylesheet" type="text/css" />
<link href="resources/css/yaml/yaml/core/iehacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
Then added some simple styling to make sure alignment was ok...
.ym-form .ym-fbox-select select#businessDateFilterType,
.ym-form .ym-fbox-select select#exceptionFilterType {
margin:2px !important;
}
.ym-form .ym-fbox-select select#registerFilterType,
.ym-form .ym-fbox-select select#teamMemberFilterType {
margin:4px !important;
}
.ym-form fieldset.border {
border: none !important;
}
I have a weird issue where IE8 doesn't appear to render my background image using imported CSS.
Because of IE8's problematic issues and its lack to support many CSS3 elements, I am forced to use conditional logic to load specific stylesheets for my site content. I am using MVC4 and my _Layout page has the following in the header:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="#Url.Content("~/Content/DeprecatedSite.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 8]>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
.gradient {
filter:none;
}
</style>
<![endif]-->
In my deprecated.css file I have the following:
#main {
background:url('/Images/iecollage.png');
background-repeat:no-repeat;
width:100px;
}
In my site.css, I have this comparable code for the same ID tag:
#main {
background:url('/Images/collage.png');
background-repeat:no-repeat;
background-size:920px;
width:100px;
}
I had to use 2 differently sized images and attribute definitions to correct the way the browsers interpreted the Markup. I am comparing the results using IE8 and Chrome.
When I launch the site, the home pages reflect the appropriate corresponding images and renders everything as expected.
My problem occurs when I navigate to another page which resides outside the Home directory (if that really makes any difference with respect to the issue).
The page has the following in-line code:
<div id="spotlight" style="position:relative;left:-50px; top:2px; height:820px;margin: 0;width:650px;">
In my Site.css file I have the ID styled as such:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
width:100px;
}
In the Deprecated.css the style is:
#spotlight {
background:url('/Images/orange_spotlights3.jpg') no-repeat;
}
In Chrome, the style gets loaded from the imported stylesheet. But in IE8 I get a blank area where the image should be loaded.
The quirky behavior I noted is that if I were to remove the following lines from the Site.css file, then both Chrome and IE8 will render the image but I loose the transparency effect in Chrome which is not the intent of separating the ID's to different stylesheets.
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
Its as if the 2 stylesheets are confusing the browsers or something.
Any explanation would be greatly appreciated.
As it stands, I am thinking of simply scrapping any support at all for IE8 because its getting to be too much of a bother trying to create 2 different accomodations to render the elements.
If you're using MVC it may be a problem with the absolute path which is kind of what it sounds like is happening. (Try pulling up your developer tools in Chrome or FF and check out the console while doing a page reload see if you get a 404 on the image GET request)
You can try something like ../../Images/orange_spotlights3.jpg where each ../ is one folder level up. You could also look at using a helper like #Url.Content("/images/orange_spotlight3.jpg") or try the absolute path all together.
Ok, after doing some blundering with the stylesheets I managed to get both to play together. What I ended up doing was retaining the comments for all the previously mentioned lines in the
Chrome stylesheet except for opacity:.60
So my stylesheet that will be used to support all other browsers other than IE8 now looks like this:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
opacity:.60;
width:100px;
}
The other stylesheet for IE8 remained as is and both pages render the image appropriately according to their assigned stylesheets.
Apparently the following attributes don't work well in IE8 and can obviously cause problems:
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
I have tested this using Firefox, Chrome and IE8. I have not seen if there are issues with any other browsers but I would imagine this should work with Safari as well.
What I still have no explanation for is why those elements affected IE8 browser when they clearly did not exist in its assigned stylesheet.
In the next revision of this site, I will definitely drop support for IE8 altogether. As much as I'd like to make it available to users having out-dated versions of IE 8 and earlier, its just added labor to try to keep up a dead horse. :-)
I have a nested div (see below) which have different CSS classes to give a background color for the container and a format for the text
<div class="section">
<div class="sectionTitle">
<dx:ASPxLabel ID="lblSectionTitle" runat="server" Text='<%# Eval("SectionTitle") %>'></dx:ASPxLabel>
</div>
<div class="sectionTitle">
<dx:ASPxLabel ID="lblSectionDesc" runat="server" Text='<%# Eval("SectionDescription") %>'></dx:ASPxLabel>
</div>
There is a closing tag for the section div, there's more content in there which is rendering correctly.
The CSS for the above is:
.section
{
padding: 5px;
background-color: #ffffff;
}
.sectionTitle
{
font-size: 11px;
font-family: Arial;
font-weight: bold;
color: #546fb2;
}
When I comment out the background color in .section the formatting of sectionTitle is being applied but when I put the background-color in there it overwrites the color of the sectionTitle. I have tried setting the color of .section to match .sectionTitle but this still doesn't work.
In every browser (IE9 non-compatibility, Firefox, Chrome) it works fine and I've been looking at this for a couple of hours now which is getting slightly frustrating as I can't spot the issue.
The content is on a ASP.NET page which uses a MasterPage which has the doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Can anyone help shed some light on this please?
Thanks in advance
Andy
Internet Explorer has a compatibility "feature" where it always renders sites that are on the local network in compatibility mode. You have to explicitly turn this off in one of two ways.
<meta http-equiv="x-ua-compatible" content="ie=edge" />
This edge marker tells ie to always render in it's most standard mode it supports.
The other method (which I prefer) is used if you are using a server side technology like asp.net or php, which is to add an http header (in asp.net this goes in global.asax, also the chrome=1 enables chromeframe if installed):
protected void Application_BeginRequest()
{
Response.Headers.Add("X-UA-Compatible", "IE=edge, Chrome=1");
}
EDIT:
There is also a third way, and that's to disable it in the compatibility view tab in Internet Options. This only affects your computer, however.
Also, it's better t use the header method if at all possible, rather than the meta tag method. By the time the browser has read the metatag, it's already in it's primary mode. The meta tag only affects the document rendering mode, rather than the browser compatibiltiy mode. There is a subtle difference that can, in some cases, have an affect.
try add this to header
<meta http-equiv="x-ua-compatible" content="ie=emulateie9" />
Press F12 on IE9 and if there is document mode Qirks, you must fix it by meta tag. Maybe this is your problem.
I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory. Any idea what might be the problem?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
style.css
body{
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration: none;
}
#main{
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
The above doesn't work. Adding the css inline in index.html works fine though
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
body {
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
#main {
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
Add
type="text/css"
to your link tag
While this may no longer be necessary in modern browsers the HTML4 specification declared this a required attribute.
type = content-type [CI]
This attribute specifies the style sheet language of the element's
contents and overrides the default style sheet language. The style
sheet language is specified as a content type (e.g., "text/css").
Authors must supply a value for this attribute; there is no default
value for this attribute.
Check both files in the same directory
and then try this
<link href="style.css" rel="stylesheet" type="text/css"/>
As per you said your both files are in same directory. 1. index.html and 2. style.css
I have copied your code and run it in my local machine its working fine there is no issues.
According to me your browser is not refreshing the file so you can refresh/reload the entire page by pressing CTRL + F5 in windows for mac CMD + R.
Try it if still getting problem then you can test it by using firebug tool for firefox.
For IE8 and Google Chrome you can check it by pressing F12 your developer tool will pop-up and you can see the Html and css.
Still you have any problem please comment so we can help you.
You have to add type="text/css" you can also specify href="./style.css" which the . specifies the current directory
I have struggled with this same problem (Ubuntu 16.04, Bluefish editor, FireFox, Google Chrome.
Solution: Clear browsing data in Chrome "Settings > Advanced Settings > Clear Browsing Data",
In Firefox, "Open Menu image top right tool bar 'Preferences' > Advanced ", look for this image in the menu:
Cached Web Content click the button "Clear Now".
Browser's cache the .css file and if it has not changed they usually won't reload it. So when you change your .css file clear this web cache and it should work unless a problem exists in your .css file.
Peace,
Stan
With HTML5 all you need is the rel, not even the type.
<link href="custom.css" rel="stylesheet"></link>
Well I too had the exactly same question. And everything was okay with my CSS link. Why html was not loading the CSS file was due to its position (as in my case).
Well I had my custom CSS defined in the wrong place and that is why the webpage was not accessing it. Then I started to test and place the CSS link to different place and voila it worked for me.
I had read somewhere that we should place custom CSS right after Bootstrap CSS so I did but then it was not loading it. So I changed the position and it worked.
Hope this helps.
Thanks!
Also make sure your link tag's media attribute has a valid value, in my case, I was using WordPress CMS and passed the boolean value true in the media field so it showed like that.
<link rel="stylesheet" href="./style.css" media="1">
That's why it was giving error.
There are three main attributes on which the css style loading depends.
Make sure that your link tag's relation rel attribute's value must be valid for a css file i.e. stylesheet.
Make sure that your link tag's target href attribute's value must be pointing to a valid an existing Cascading Stylesheet file. Like in your case it's ./style.css.
Remember that you can use both absolute and relative paths in the href attribute's value. That means if your file style.css is present at the root i.e. / then you can also use /style.css in the href attribute's value or else if the file is present in the same directory in which your HTML file is present then you can use ./style.css as the value in your link tag's href attribute's value.
Make sure that your link tag's media attribute should be one of the following.
For every device you can use the all keyword as your media attributes's value.
For PC's and laptops only you can use the screen as your media attribute's value.
For webpage prints you can use the print keyword as your media attributes's value. Note that it also applies when you press the Print Screen button to capture the screen's image.
At last for screen readers you can use the speech keyword as your `media attribute's value.
By following these rules your HTML structure for link tag will be.
Your css file should be defined as UTF-8. Put this in the first line of you css file.
#charset "UTF-8";
You could try this:
<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
Make sure that the browser actually makes the request and doesn't return a 404.
I found myself out here looking for an answer and figured out that my issue was a missing character - spelling is important.
<link href="tss_layout.css" rel=styleheet" />
once I put the s in the middle of stylesheet - worked like a charm.
I had been facing the same issue,
For Chrome and Firefox but everything was working how it should in internet explorer. I found that making the CSS file UTF-8 made it work for chrome.
<link href="style.css" rel="stylesheet" type="text/css"/>
I had a similar problem and tested different ways to solve it.
Eventually I understood that my index.htm file had been saved with "Unicode" encoding (for using Farsi characters in my page) while my .css file had been save with "ANSI" format.
I changed the encoding of my .css file to "Unicode" with Notepad and the problem got solved.
Not sure this is valuable, but I will leave this here for others. Making sure that "Anonymous Authentication" was set to "Enabled" loaded my CSS file correctly.
To do that in Visual Studio 2019:
Select your solution's name, right click, and hit "properties"
Navigate to the "Properties" frame, typically in the bottom right corner
Ensure that "Anonymous authentication" is set to "Enabled" as shown below
Here is another cause to add to the collection on this page. In this code...
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen">
...I misspelled rel as ref.
After digging and digging on this issue, for me it was solved by Johannes on another thread: Local CSS file is not loading from HTML
The type attribute in your link tag has typographical quote
characters: type=“text/css”. Try to change these to "plain" quotes
like type="text/css"
I had similar problem.. my code was working fine but suddenly css sheets stopped working.. after some detection I found out that somehow the MIME of style sheet was changed from type="text/css" to "text-css".. Idk how they were changed since the code was working few hours ago but however I changed it and it worked fine. hope this helps.
Well I faced this issue today and as workaround (not the best) I did below
<script type="text/javascript" src="testWeb/scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>
where testWeb is my root app folder in my htdoc dir. in windows (using xampp) or in /var/www/html directory as for some reason I do not know yet
<script type="text/javascript" src="scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>
not loading while html index file beside scripts folder in same directory.
This may be a 'special' case but was fiddling with this piece of code:
ForceType application/x-httpd-php
SetHandler application/x-httpd-php
As a quick test for extentionless file handling, when a similar problem occurred.
Some but not all php files thereafter treated the css files as php and thus succesfully loaded the css but not handled it as css, thus zero rules were executed when checking f12 style editor.
Perhaps something similar might occur to any-one else here and this tidbit might help.
I was having similar problem but resolved changing the Style.css to style.css Because of this name caps letter "S"change it was throwing 404 error we won't notice small changes in my system it was working but when I hosted in cloud it was throwing this error make sure this all being checked after uploading in cloud
i have the same probleme, i always change the "style.css" to "styles.css" or any other name
and it worked fine for me.
HTML was not loading my css because i had placed the style.css in template folder rather it should be in static folder . After replacing my file to static folder it worked for me
Use the following steps to load .CSS file its very simple.
<link rel="stylesheet" href="path_here.css">
note: 1--> don't forget to write "stylesheet" in rel attribute.
2--> use correct path e.g: D:\folder1\forlder2\folder3\file.css"
Now where ever directory you are in, you can load your .css file exactly path you mention.
Regards! Muhammad Majid.
guys the best thing to try is to refreash the whole website by pressing ctrl + F5 on mac it is CMD + R
Add type="text/css"
It worked for me.