I have been doing websites since the late 1990s and have never run into this before. I have, over the years, developed templates for both html and css. I just started a new site and after editing the html code and css entries, I find that there is an unwanted image in the header. I have searched through all the html code and the css files and cannot find this image. The templates do not have image names in them and when starting a new site I go through them to add the proper images. In the header there is a background image from a site that I built 6 years ago. That file is not in the images directory or in the htlm or the css files. I tried creating a blank image in Photoshop with the same name and putting it into the css entries, but no change. I specified it directly in the html. but no change.This is driving me crazy. I probably will have to start over from scratch bu does anyone have any ideas?
Not without seeing code/live page.
What does “Inspect” say about the image?
CSS HTML Validator does not comment on it at all.
I mean the browser developer tools.
Right-click: Inspect (Element).
I do not see anything about the image in inspect. When I refresh the browser page, the new image shows for about a second them the other image loads on top of it. I created a empty image in Photoshop to replace the one that I do not want and if in open it from the file system on my computer is is what I want to see. I tried deleting all the uploaded .png files and uploading the corect, blank image and when I put the path to the image it shows up properly. I have downloaded everything from the site to a new directory and I still get the wrong image. I guess I will have to start over in this site, only 4 hours lost.
Is there something else at play here, javascript for example?
I think there must be. Some kind of path or name problem. eg. both named a generic “background.jpg”, an htaccess redirect. Code in an “include” that hasn’t been spotted yet.
I must admit, it seems extremely odd to me and I really have no strong idea about what exactly might be the most likely cause.
Hi there EoinDubh,
please post a link to the site in question so that we
may have a possibility of observing your problem.
coothead
There are only 2 logo.png files listed in main.css, both commented out. The .htaccess file in a very basic one at this point. There are only 3 includes non of which have any images. The only images in main.css are structural i.e rounded corners, etc.
Unfortunately, I can’t post a link as this is a site that is being moved to a new ISP and the dna is not configured as yes because the old site needs to stay up until the new one is ready. So it is only accessible in the new hosts controlpanel or by using my personal login. I guess I could setup a VM on my system and see what happens there. I have done a file search on every file in the directories both on my computer and the host and do not see the image file anywhere. I guess that I will just start over again and do it as a plain html site and leave css out of the picture for now and then deal with it later. Thanks for the inpuy guys.
There is a little javascript, but I try to keep it to a minimun. I searches the .js files also with no luck.
Might it be a corrupt image? eg. maybe Photoshop has retained the “old” image in a layer and until opacity happens with the “new” image the old is briefly visible?
I created a new image from scratch the same size.
Hi EoinDubh,
There are always more ways than you first think of.
The browser’s developer tool mentioned by @SamA74 shows whatever code the browser see.
If you point the mouse on the image and right-click and use “Inspect Element”, do you say it can’t see the code that loads the image displayed by the browser?
I think it could be helpful if you told us the environment this happens in, such as what the host platform is, the browser(s) you use, if the new site is static html or dynamic like a Wordpress site for example.
The site is a combination of .shtml and .html. there is a little bit of .js for printing. The files are on the host’s platform, probably Linux of some sort. I am using the current version of Firefox. No Wordpress, no SQL No bells, no whistles. I have downloaded all files and searched them eith my editor, the current version of Edit Pad Pro. The image that shows up is called “GapofDunloe.jpg” and the text in the html and .css is logo.png. There is no “GapofDunloe.jpg” in the images directory. I have been working on this singe 6:30AM today and it is now 4:30PM. Enough is enough. I deleted the whole thing from the server and will take another swing at it tomorrow.
Thanks guys for the input.
If the page has the shtml extension, you should check the server side includes. (Perl?). Or, if it does and the page isn’t using SSI, then you should give it the html extension instead.
I have had 10 other pages on that host using shtml with no issues. Some of them have been moved to another hosts because of sql and php issues, but this site uses neither of those. Check http://11thrru.org which was created with the same template.
If the browser is displaying the image, then inspect should show you where it’s coming from. Sometimes if images/elements are layered, it may not be in the element you initially click on, but exploring to the document tree through adjacent and nested elements should reveal it somewhere in there.
Can you not post the page that is giving trouble to a temporary location on the website posted above? Without seeing the page itself people will only be guessing as to what is going on…
I decided last night to just bin the site and start over. I eventually found that the image was coming from the original site, how I do not know as it was not shown in any of the html or css, but did show up eventually in inspect. Easier to start fresh. Thanks for the help, hopefully the next version will work better.