|Page images don't always display.|
It's a mystery
I'm relatively new to web design, so don't laugh at my ignorance- we all have to start somewhere! I uploaded a site last week and all images displayed fine. OK, today I was, for the first time, attempting to add some thumbnails in Dreamweaver 8. In the past I've just added a flash image presentation. I read a couple of mini tutorials and first of all followed one which involved adding a new CSS style. It didn't work, so I added thumbnails by following another tutorial- creating a thumbnail and larger image which was linked by point to file method. When I previewed each page in the browsers everything was fine and all images were displayed. However, when I accessed a page of the site from another page of the site, SOME of the images and links were missing.
To explain further, if I'm on the History page in Dreamweaver and preview that same page in the browsers, the images display and the links work. If I then access the same page from another site page, the images aren't there, only the Alt description. Also some of the links don't work, but only when the pages are accessed from another page in the site. This is happening on several pages.
I deleted the thumbnails and copied and pasted the code from the pages of the uploaded site which are fine, but the prob remains. It seems that a setting is not right in Dreamweaver, but maybe I'm wrong! Any ideas, please. I've been on the case for hours, so tearing my hair out!
Every problem solved gets me closer to becoming an expert!
Thanks very much for any help! Susie.
Let's start with some basics...
So, first things first....
Are your web addresses correct? If you are using truncated paths "about.htm"....instead of full URL's "http://www.url.com/about.htm". If confusion sets in, write every page and image using the full url until you get everything working.
[edited by: Slinger at 6:12 pm (utc) on April 27, 2009]
Welcome to WebmasterWorld [webmasterworld.com] :)
Are you sure that all the images are uploaded to the remote server? Also check you file paths are not pointing to a local file.
Thanks for the replies, but still struggling to sort it. The site was uploaded last week and all the links and images are working fine. As I was working on it and viewing it in the browsers everything was fine. It was only immediately after I followed a tutorial about adding thumbnails that the problems started. Everything points to the fact that something I did while following the tutorial caused the problem.
I have a clearer head this morning and after browsing around on the web, I think the prob is connected to creating a new style sheet and selecting Advanced idís pseudo class selectors. Somehow, I think this is affecting the links. Also every image I now insert shows up when I preview the page in the browser, but when I leave the page then return to it the image has gone. I obviously got something wrong along the way and it seems I applied the style to more than one page. Any advice on sorting it out would be really appreciated.
I have designed and uploaded several websites with no probs- there always has to be a first time to mess it up I guess. Thanks, Susie.
No URI's please, see TOS [webmasterworld.com]
[edited by: limbo at 7:18 pm (utc) on April 28, 2009]
Are you using Dreamweaver's "Preview in Browser" for your previews? Do you have "Preview using temp files" ticked in DW preferences? If so, that's why. DW generates a temp file on the fly for your preview, which works for that preview only.
Hi, thanks for the reply. I looked in DW preferences and "Preview using temp files" was checked. I unchecked it and previewed the site in the browser again, but the newly inserted images wouldn't display at all so I went back and checked it again. As before, the page images were displayed, but on leaving the page and returning, they had gone. It is only the most recently inserted images which don't diplay. I opened up another site I'd created in Dreamweaver and all links and images are fine whichever page they are accessed from.
Any other ideas. I reckon it's got to be something relating to the steps I took earlier as mentioned in my last posting. How would I get rid of the advanced id's pseudo class selector that I selected earlier?
Thanks again. If I ever sort this out, I'll celebrate with champagne!
You're probably using "root-relative links" for the images that won't display. When you're previewing in Dreamweaver, root relative links won't work, unless you're previewing using temp files. When do that, if you click away and come back, the root relative links no longer work.
The earlier sites where the links and images work are probably using document relative links, which work in the preview regardless.
Look in the code and give us a sample of one of the image links that doesn't work, and one that does.
Thanks for helping Sonjay.
I discovered something obvious when comparing the images in the coding. The ones that don't display have class styles attached to them. I tried to delete the styles in the css styles, all rules, but they reappeared. This all ties in with what I suspected earlier. I'm not an expert with styles and how to get rid of them.
<p align="center"><a href="/example.html"><img src="images/example.jpg" width="100" height="70" border="0" /></a></p>
This doesnít work
<p align="center" class="style14"><a href="/example.html"><img src="/images/example.jpg" width="100" height="73" border="0" /></a></p>
<td width="300" height="756" align="left" valign="top" bgcolor="#CCCCFF"><p><img src="images/example.jpg" width="300" height="360" /></p>
This doesnít work
<p align="center" class="style10"><img src="/images/example.jpg" alt="Havoc" width="300" height="225" /></p>
<p align="center" class="style17">Havoc</p></td>
What do you reckon, Sonjay. I feel happier that I'm not alone in all this and I really appreciate your help.
[edited by: limbo at 7:19 pm (utc) on April 28, 2009]
[edit reason] examplified [/edit]
I suspect that the styles have nothing to do with this. Try removing the leading slash from the image tags that don't work. I.e., change this:
<img src="/images/example.jpg" width="100" height="73" border="0" />
<img src="images/example.jpg" width="100" height="73" border="0" />
If that works when you remove the leading slash, then the problem is definitely the root-relative path issue.
When you insert an image in DW, there's an option to use document-relative or root-relative paths. You need to read up on root-relative paths vs. document-relative paths so that you understand what's happening and can make an informed choice about which type you prefer.
[edited by: limbo at 7:20 pm (utc) on April 28, 2009]
[edit reason] examplified [/edit]
Sonjay- You're a STAR! Finally sorted! I will take your advice and read up on it all.
I never had a problem in the past and just added the image by "point to file". Suddenly every image gave me probs, so it didn't make sense. Why now? After so many hours trying to work it out I was feeling really fed up.
I've noticed that newbies on this site don't always understand what's being explained to them, as technical jargon is often used in the replies. Thanks for spelling it out to me in simple terms, without the sarcasm included in a lot of replies often seen on this type of forum. It's worth remembering that the newbies will be expert in other walks of life. None of us are born experts and we all have to start somewhere.
Many, many thanks for your patience. I'll celebrate tonight!
The next time you need to add an image, don't do "point to file." Instead choose the menu item Insert -> Image. In the dialog box that pops up, there's a checkbox to use a document relative or root relative path. That's a "sticky" setting -- if you choose "document relative" (no leading slash), it'll stay document relative for future images. (Even if you go back to the "point to file" method.) I can only guess that somehow that option got set to "root relative," and from that point on your images have been using root relative paths.
Thanks for that Sonjay.
I've copied and pasted it into a word doc to use the method later.
Sorry to be a pain, but I tried to add a thumbnail by creating a small image and linking to the larger image by point to file before reading your reply. It worked when I viewed it in the browser, every time, but when I uploaded the page I got the error message
The requested URL /images/example.jpg was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
The code for the thumbnail image on the page I uploaded is
<p align="center"><a href="images/example.jpg"><img src="images/example.jpg" alt="Lacey" width="120" height="95" border="0" /></a></p>
I removed the forward slash in the coding before uploading it, but the error message shows the forward slash.
What other method should I use to link to the larger image? Your comments would be really appreciated.
I've never done thumbnails in Dreamweaver, so it's all new to me. I'm off to have an ice cold lager. I'm so pleased the main prob is sorted- who needs champagne?
I'm learning a lot today! Thanks,
[edited by: limbo at 7:22 pm (utc) on April 28, 2009]
[edit reason] examplified [/edit]
Double check you're viewing the latest version of the remote site by clearing your cache. That might eliminate your current bug. Also check your image is in the correct directory.