Lightbox2 works on all browsers except FireFox - firefox

I have went through numerous posts about this and still can't get an answer. I created this website:
www.poochiemoo.com
and they work on all browsers except Firefox, when going to any of the galleries and attempting to look at the images.
One strange thing I learned, was that when viewing this offline it worked fine. But when moving them over to the host servers, they all stopped working. After some investigating, I learned that it had to do with the host Linux servers and how I name things using upper and lower case. Most of the problems were solved, but this lightbox one seems to be getting the best of me.

Your images are 404ing. It looks like the image hrefs are all using backslashes. Chrome and IE are automatically fixing the error, but Firefox isn't.
Your links are in the format:
Images\Cupcakes\artistpalette.JPG
Change them to the format:
Images/Cupcakes/artistpalette.JPG
At the moment the backslashes are being encoded by Firefox, so links like this are generating a 404:
http://www.poochiemoo.com/Images%5CCupcakes%5Cartistpalette.JPG

Related

EXTENSION_BASE_URL causing 404 on some fonts

I'm using Laravel 8 on Heroku and keep getting 404 errors for some fonts. This just started happening earlier today but I haven't changed any of my code in several days.
This is a sample of what I'm seeing from laravel's error handler:
404 - https://www.example.com/%7B%7BEXTENSION_BASE_URL%7D%7D/b06871f281fee6b241d60582ae9369b9.ttf
404 - https://www.example.com/%7B%7BEXTENSION_BASE_URL%7D%7D/fee66e712a8a08eef5805a46892932ad.woff
404 - https://www.example.com/%7B%7BEXTENSION_BASE_URL%7D%7D/af7ae505a9eed503f8b8e6982036873e.woff2
I searched my entire directory for EXTENSION_BASE_URL and it doesn't exist anywhere in my code.
The user id's associated with these errors are not unique and it seems to be happening to multiple people. It's the same three font files as above each time.
My best guess is there's some kind of plugin people have installed that's trying to use a custom font that doesn't exist. I can't find any reference to EXTENSION_BASE_URL when I do searches online, so I can't figure out where it's actually coming from.
The only custom fonts I use are an import for Raleway from the Google Fonts API. I have jQuery 2.2.4, Bootstrap 3.3.7 and FontAwesome 5.4.1 which might also be including fonts with their CSS. Aside from the Raleway include, the versions for the other CSS files haven't changed in a while.
Since it doesn't seem to be affecting everyone and I can't track down what these font files are, my plan is to simply exclude these font files from showing up in my logs. I'd love to know what caused this though so I can take any other action if necessary
We had this same problem with some of our users and we tracked it down to a browser extension called ProWriting Aid Grammar Checker which is for the website https://prowritingaid.com/.
In our case, not only was it creating the errors you mention with fonts, it also caused some JavaScript to execute improperly.
This extension is available on Chrome, Safari, Firefox, and Edge. We had users across all these browsers have the same problem. It is clear that the problem code is shared across all these browser extensions' code base.
Having users uninstall that extension solved our issues.

images not appearing online but appears offline. I am uploading via Filezilla

I am uploading my website using Filezilla, and some images are not appearing. I have checked that the file names are all lower case and that the file type is set to auto instead of ASCII. I have cleared the cache too and I am still not seeing the same images not appearing.
I have got a 403 and 404 error on these images in the console, please see screenshot image for this.error image
All images work fine when testing locally on my computer but some random images are not appearing. Anyone any ideas why this could be?
Thanks!
image not appearing
Could you maybe provide some code with examples?
It could e.g be that the path on the server is different. If you use absolute paths it may work on your host where the homepage is under /. But if it is under /user/ or something similar (so not in the root), the paths can be broken and images will not appear. So check if you provide the paths differently for the pictures that work as opposed to the ones which fail.

Background images are not being referenced correctly

Ok, first off, I know that the code referenced below has to do with a Joomla! site, however, I have had this problem on more than one site, not all of them using the Joomla! framework.
Now the problem:
I have some background images that are being referenced in my CSS stylesheet as:
background: url(../images/j_header_middle.png) repeat-x;
However, when the page is loaded into the web browser it is being referenced as:
background:url(http://64.19.142.11/www.outoftheblueinc.net/administrator/templates/bluestork/images/j_header_middle.png) repeat-x
I have done some searching on the web and have not been able to find a proper explanation as to why the images are being referenced this way. If I go into the console and remove the IP address from the file location it works just fine. I just have no idea why it is being added to the file location in the first place.
Any constructive ideas as to why this is happening are welcome.
I was wondering if you've found a satisfying explanation for this. If not then at least this post will serve as more data. My website recently had this problem too. In my javascript, I linked with the google hosted version of jQuery UI 1.8.18. Everything seemed ok for weeks until today when my browser kept trying to connect with 64.19.142.11. This link is the culprit.
http://64.19.142.11/ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/cupertino/images/ui-bg_highlight-hard_100_f2f5f7_1x100.png
That png file is an image resource specified by jQuery UI. I only started to see the problem today and I can't be sure whether it just started happening or the host with IP 64.19.142.11 recently went down. For weeks, jQuery ui 1.8.18 works fine.
Finally, after downgrading to 1.8.17 the problem seems to go away (no weird IP injection).

Chrome vs. Firefox rendering differences of unicode characters - MathJax

I'm having troubles figuring out why Chrome and Firefox are rendering some things differently. Below are images of a part of my project as seen in Firefox (top) and Chrome (bottom). MathJax renders everything as the page is loading and once everything has been processed and typeset, it is displayed on the page. So I'm not sure if this is my fault of MathJax's fault. Anyway here are the images...
... if you would notice, the square with black border is different in Chrome, and in a bad way. Any ideas as to why this might be happening? The following is output from Chrome's console...
Resource interpreted as font but transferred with MIME type image/svg+xml. /MathJax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Regular.svg#MathJax_Main-Regular:-1
Resource interpreted as font but transferred with MIME type image/svg+xml. /MathJax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Bold.svg#MathJax_Main-Bold:-1
Resource interpreted as font but transferred with MIME type image/svg+xml. /MathJax/fonts/HTML-CSS/TeX/svg/MathJax_Main-Italic.svg#MathJax_Main-Italic:-1
Resource interpreted as font but transferred with MIME type image/svg+xml. /MathJax/fonts/HTML-CSS/TeX/svg/MathJax_Math-Italic.svg#MathJax_Math-Italic:-1
etc...
The code for rendering the square alone, without all the other fancy stuff, is relatively simple...
<div id="square">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mo id="tag0" class="expand">◻</mo>
</math>
</div>
... and then I tell MathJax to render it...
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "square"]);
... and MathJax does its thing (I have no control over the rendering MathJax does). So I don't quite know where the problem is.
I know this is a very strange and very specific question but I'm hoping someone in the Stack Overflow community might have some idea or has dealt with MathJax previously. Hopefully some brainstorming will help resolve this issue.
The box you are seeing Chrome is the "missing character" symbol. The MathJax fonts don't include U+25FB, and so Chrome is showing the missing symbol. It looks like Firefox is finding the character in a different font and using that (or perhaps you have STIX fonts on the machine running Firefox but not the one running Chrome, and MathJax is using that). Browsers differ in their ability to find alternative fonts for symbols that aren't in the MathJax fonts.
In any case, try using U+25A1 instead of U+25FB and see if that works better for you.
Davide
MathML will come to Chrome natively, WebKit has been working on it for some time now:
http://www.webkit.org/projects/mathml/index.html
I guess this question should be marked as a bug for MathJax. Hopefully soon, there would be a native solution.
I do not have a real answer, however rendering differences among browsers are nothing new. I use Firefox, Chrome, Opera, IE (in that order), quite often one of the browsers renders better than the rest. Firefox has some nice debugging plugins, you may try those (Firebug???). Warning: You may spend a lot of effort on this. If you get into troubleshooting CSS, ouch :).

CSS reload on IE7

It looks like IE7 doesn't reload the latest version of my stylesheet each time I upload a new version on the server.
This is annoying as I am debugging my .css file to make it work on IE...
Tried to empty the browser cache but still not working.
Thanks for your help.
Ctrl-F5 - forcible way to reload in IE
Include your version number in the file name. myfile_v1234.css
When testing, every time you do an update you can just wite "stylesheet.css?r=98123"
As long as the query string is different, it'll be downloaded again.
If you need, you can use javascript to append Math.random(), to get the random number. Not required on production though, when updates would be stable.
2 Questions:
Does IE eventually load with the newer stylesheet?
How are you saving the changes to the server (SSH, Web Interface, etc.)?
I ask because I ran into an issue with a web-based file management system a while back where one browser would show the CSS just fine, the other wouldn't, and we noticed the issue of which browser played nicely depended on which browser we used to upload the CSS.
The reason turned out to be that IE gave the CSS file a different MIME type than Firefox. If you continue to notice the issue even when you've cleared the cache, check the MIME type of the file using Firefox by going to Tools > Page Info.
Also, if it is simply a caching issue, consider turning caching off in IE. I believe this should be an Advanced Option under Internet Options.
Also, you may want to try creating a special developer environment for IE (if it comes down to it.) Perhaps have another machine with IE7 and no caching and any other features turned off (A kiosk mode, perhaps), and then previewing the page on that machine.
Thanks to you all!
I did manage to solve my problem with the "stupid" Ctrl+F5, and by changing the Internet Parameters of Windows to reload content every new visit.

Resources