In order to create a website, I first worked with MAMP in a local mode.
After finishing the index page, I uploaded it.
The problem is that the images on the website are bigger than in the localhost for the index page.
I inspected the elements, but the style applied to each div are same.
I used "px" as unit of length to display the images.
I don't understand why two elements styles can be different while their codes are same.
I think i know whats your problem.
It's a cache problem.
Delete your cache and check it out.
For developers there is a function called "Disable Cache" you can find it , for example, in Google Chrome here: https://www.technipages.com/google-chrome-how-to-completely-disable-cache
Edit:
Clear cache in Google Chrome: https://support.google.com/accounts/answer/32050?co=GENIE.Platform%3DDesktop&hl=en
Related
TL;DR - why does Wordpress remove file:// from file links?
Our intranet page has a section containing icons with links behind them. All of a sudden (our guess is after an update), one of the links stopped working. The link is as follows (1):
<img src="/img/meetings.jpg" style="width:75px; height:75px;"/>
The expected behaviour (in Internet Explorer (2)) is that the file explorer opens, and points to the share \vmdata\meetings, which has always worked up until now.
When I hover over the icon image I see the following code however:
http://vmdata/meetings
and when I check the HTML by viewing the source of the page, I see that the file:// prefix is indeed gone:
<a href="//vmdata/meetings" target="_blank" rel="noopener noreferrer">
To work around this issue, I had a look at a page on which the original creator had added the same type of links. My idea was to create a similar page, copy the HTML code on the page and link the icon to said page. I added the page and HTML link but after viewing the page, the result is exactly the same: the file:// prefix is gone.
My guess is that something within Wordpress is rewriting/removing the file:// link. My question now is twofold: how do I stop this rewriting/removing behaviour, and/or how can I add a link to a fileshare as before?
PS: the creator of the website is no longer available, and the website is running yet unmanaged. Only content creators are left. We have no Wordpress knowledge in house, so we're basically just trying to keep the site up and running (in wait for a new site).
(1) I realise that pointing to a server share from an intranet site is a very ugly way to publish files. However, as stated before, we're in a situation of if it ain't broke don't fix it with this website, so we just want to go back to a working situation. Creating a page to link to (hosted) documents would be a lot better, but is for various reasons not feasible.
(2) please don't bother pointing out NOT to use Internet Explorer (anymore), we all know that but we are stuck with it because it is a requirement for one of the major tools we all use everyday. As long as that tool doesn't support other browsers, we're stuck with IE (unfortunately).
I found another question regarding this issue: can't save network share path as a link in wordpress 3.1
Apparently the correct way to add an allowed protocol into WordPress is to modify the functions.php file and add the following code:
function allowed_link_protocols_filter($protocols)
{
$protocols[] = 'file';
return $protocols;
}
add_filter('kses_allowed_protocols', 'allowed_link_protocols_filter');
More information can be found in the following article: https://developer.wordpress.org/reference/hooks/kses_allowed_protocols/
Adding the code above solved the problem for me, so I hope this helps others to solve similar issues in the future.
Chrome extensions have a "Details" page (for example, here's Adblock's). On this page you can change the permissions of the extension to be one of: On click, On specific sites, or On all sites. These options determine whether the extension runs all the time on every site or only when you want them to.
This extension, however, does not change behavior when I modify the permissions from its Details page. Why is this the case? Here's their source code on Github.
I noticed that they use a persistent background page. Would that cause the issue?
Thanks in advance.
The correct answer as stated in the comments:
[the extension] doesn't actually run on sites other than Reddit. It just takes an URL of a tab and runs it through Reddit.
This means that changing the permissions in the Details page doesn't affect anything.
When I try and change my current CSS or add new CSS to my style-sheet no change shows up (tags are still being styled by the old unchanged code).
For example, if I delete the contents of a class and I go into chrome debug tool using F12, I can see that the contents which I deleted are still showing up - even if I clear the cache by pressing Ctrl+Shift+R, OR by pressing Ctrl+F5!
All the other files of my website seem to be updating correctly, so if I use inline styles it will update correctly.
Strangely when I go into my websites control panel and manually download the CSS style-sheet from my server I can see that the code has indeed being updated with the new code, this is weird because upon inspecting it with F12, I can still see the old code with no changes.
I am using Microsoft Webmatrix to do my coding.
I am using the Chrome Web browser.
I am using Hostgator hosting.
I've exhausted all my trouble shooting options and have been beat by something that by all means should not occur. I think I've had a problem like this before and I think that it was solved by just waiting a day for whatever magic to work but I shouldn't have to wait. A problem like this is absolutely unacceptable in a live environment. Any ideas of what could be causing this?
FIXED!
changed: https://example.com/app/source/css/main.css
to this: https://example.com/app/source/css/main.css?v=1
You could try ctrl + shift + r (on a PC) to hard reset the browser and make sure the cache isn't displaying old CSS.
One thing is to verify you are editing the correct file. I managed to have that issue one time when I had two files named the same, but one was outside the folder with the index.html and that was the one I was editing.
Add ?v=1 behind the URL of the CSS link in the head, which will force using a non-cached version, because of the different (new) file name. The number should be unique, so if you want to use this in the future, make sure to replace the 1.
Every other website I visit, the inspector works as expected:
But in many of the sites I'm editing within apache server (using xampp) somehow they doesn't show the "filename.css:lineNumber" data
Also, every change I try to do in the inspector in thse sites, doesn't do anything to the code shown in the source tab.
I've tried refreshing, hard refreshing with cache, closing and opening the tab, closing and opening chrome again. The same problem occurs.
In other sites the inspector works well, but not in many of the localhost sites.
Has someone experienced this before? Is there a way to fix this?
If you are using a client-side CSS generator library such as Lea Verou's excellent -prefix-free or client-side Less, you will not see source information as it has all been processed and reinjected as style elements.
Client-side Less has a property [dumpLineNumbers] to include source line info as a comment in the generated source. (I'm not sure if this will display in Chrome's inspector - but I think it might)
The only "fix" I know of for -prefix-free is to temporarily remove it, obtain the source info for reference, then put it back in.
I have had the exact same problem (not using a css generator), and it appears to be a known bug with the current version of Chrome, the solution is to use the more up to date Beta version known as Chrome Canary - Here's the link :)
https://www.google.co.uk/intl/en/chrome/browser/canary.html
Try to check what the format of your CSS file is. I had the same trouble with the UNIX and Macintosh formats. For example, try to open you CSS file in Notepad++ and in the bottom right corner of the window you'll see your current format. If you see UNIX or Macintosh there, click it with the right button of your mouse and change to DOS/Windows. Then save your file and refresh your page in Chrome. It definitely helped in my case.enter image description here
I have a really simple piece of CSS which is applying a background image to <li> elements
.icon-facebook { background: url("./images/icon_facebook.png") no-repeat; }
This works fine when I view it locally, without a web server, i.e. by double-clicking the .html file.
But as soon as I serve the same page via Apache - whether on localhost or a production server - the background images disappear.
Other background images on the page work fine - and all have identical (relative) paths.
Specifying an absolute path to the background-images does not work either.
Renaming the files did not work.
The images can be displayed just fine if navigated to directly in the browser.
Monitoring Apache's access log, the browser doesn't even attempt to request the images (!), even if an absolute URL is supplied in the CSS.
When I inspect the <li> Firebug says "could not load the given URL" but when I copy and paste the background-image URL straight from the CSS in Firebug into a new tab - guess what? It works.
I have a <div> on the same page with a different background image from the same folder which works just fine. When I replace its filename with one of my "problem" files I notice it isn't displayed any more.
The images in question are 20x20px PNGs (but I tried JPGs too).
All other browsers work fine.
This is truly driving me crazy.
Unbelievable. Truly unbelievable.
The culprit was Adblock Plus, which I had installed on Firefox but not any other browser. It was interpreting the names and/or class names of the background images as being either advertisements or social media annoyances, and therefore silently blocking them.
I had previously added my production domain to its white list, but when it changed I forgot to update it.
That explains why some image filenames worked (e.g. icon_f.png whereas others - icon_fb.png or icon_facebook.png - did not).
Let this be a lesson - do not run any kind of addons on your development browser.
I was ready to cry... and think I will now. Cry for my stupidity.
Thank you to all for your input.
Specifically, the culprit is Fanboy's Social Blocking List, which is one of the filter subscriptions included in Adblock Plus. It has already caused me a lot of distress in the past.
To disable it, click on the Adblock Plus toolbar button and choose Open filter preferences. You'll then find the list of subscriptions and you can simply unsubscribe to that one.
It's better than disabling Adblock Plus completely so you can continue using it for what it was originally intended: blocking ads.