How can I get Firefox to follow my HTML and CSS path to my pictures?
The path to my picture for CSS body background image is url("/myImages/creepy.jpg"); Chrome and Edge have no problem with locating and displaying this image.
If I copy the image into the same folder as the CSS and HTML files then Firefox displays the page as it should.
When I hover my cursor over the above path, Firefox Developer tools under Inspector, Rules and Computed says it "could not load the page". When I click on this path in developer tools the console has 4 repeated messages of 'Unexpected NaN parsing Y1 attribute. 'Unexpected Nan parsing X1'. 'Unexpected NaN parsing Y2 attribute. 'Unexpected Nan parsing X2'. markup.js :330:6. When I click on the markup.js location it displays a jar.file with "this.content.setAttributeForElement(id, name, value);" highlighted.
There is no javascript associated with this page. This is with newest Firefox and Firefox Developers Edition. Both have been installed and reinstalled 3 times. I've tried this with other jpg and png with the same result. Chrome and Edge work. They load the files whether it's the same folder or a path.
Firefox will load them only if the files are in the same folder. Right under it's nose so to speak. I would like to figure out why Firefox doesn't follow this path .
All Replies (8)
Hi, please check your code by upload or by URL to get that out of the way HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/
Try this : uninstall Firefox. Then Delete the Mozilla Firefox Folders in C:\Program Files , C:\Program Files(x86) & C:\ProgramData Then restart system. Then run Windows Disk Cleanup. (Note: This should be Pinned and run Weekly, If never done below expect 10's of gig's) Then run it again and click the button that says Cleanup System Files. Note: your Firefox Profile is saved. But you should make a back up before you do :
- https://support.mozilla.org/en-US/kb/back-and-restore-information-firefox-profiles
- https://support.mozilla.org/en-US/kb/export-firefox-bookmarks-to-backup-or-transfer
Reinstall with Current Release Firefox 61.0.1 with a Full Version Installer
Please let us know if this solved your issue or if need further assistance.
I appreciate the time and suggestions. I followed your instructions to the letter but still have exactly the same problem. Everything validated good. Firefox loads the HTML and CSS page except for the images which are located in a sub directory path. If I copy the images.jpg to the HTML folder then Firefox loads the whole page. Chrome and Edge pick up the images from a path: url("/myImages/creepy.jpg"). Firefox will read only url("creepy.jpg"). I'll send the code if you think that will help and tell me how to send it. Thanks for everything.
HI, if you have the URL and are fine with that or send code for 2 pics if it is all the same.
Something weird about the way you example the code.
Where are the CSS files located?
I think that Firefox would look for the image in the path used for the CSS files that specifies this url.
Can you post a link to a test page?
CSS and HTML files for this program are in a subfolder of Documents by themselves. Both files are written side by side in notepad++ and saved to the same folder. How can I post a link to a test page? I'm not a web site. Just me and my computer learning. After following earlier instructions I have exactly the same results. The same statements in Firefox tools. I hover over background: url('/myImages/creepy.jpg'); statement in developer tools and a balloon pops up "could not load the image". If I put a copy of images in the same folder with HTML and CSS files it loads ok as long as there is no path to images. If you tell me how, I'll be glad to send or set up anything you need.
Thanks much,
Hi your path should just be and do not even need the URL < example ||||img src="images/demolition-pic02.jpg" alt="commercial interior demolition" /> _____________________________________________________________________________ <example |||| img src=".../demolition-pic02.jpg ___________________________________________________________________ Since you are using local files that is your problem. They will always disappear and also mucks up the code. If you know what your pictures are then work blind then upload to the server with a robot notepad file tag of No index, No follow till ready to go public. ____________________________________________________________________ so if is local it would be <example |||| img src="file:///"images/demolition-pic02.jpg or the same using just the dots. ___________________________________________________________________ Does not like me to put code in here. </p>
Modified by Shadow110
Please see question answer just made as it did not like the code I put in.
Still open to suggestions from cor-el.
Thanks for time.
I'll get back here with a reason for the discrepancy between Firefox and the other browsers if I find it anywhere. I appreciate all your help but I would think that this can be an easy fix. Maybe someway my system is setup?
I have no problem in other browsers.
Once again. Chrome and Edge have no problem finding my pictures.
CSS code: body {background: url("/myimage/image.jpg");} HTML code: div class="something" src="/myimage/differentimage.jpg" alt=" "
Firefox will not follow down to myimage sub to get .jpg. Chrome and Edge will. Even I.E. 11 will.
Firefox works when I copy image.jpg and differentimage.jpg to working folder. CSS code: body {background: url("image.jpg");} HTML code: div class="something" src="differentimage.jpg" alt=" " Thanks.