I’m a newbie. Have a site mostly built, it’s beginning to look OK. It displays exactly as coded in both Google and IE. In Firefox all photos are missing. Even the empty box or the small box icon that a indicates a photo is supposed to be there are missing. The photo border appears in an odd shape over and around the the ‘alt attribute text’ and the caption. Any ideas where to look for boo-boos that are creating this conflict? Many thanks. SLS
Hello Shari Schildan welcome to Sitepoint 
If all your images are missing then make sure your file paths are correct. That is the cause of the issue :).
And of course make sure the images are actually uploaded 
In addition to what Ryan said, be aware that IE and Chrome will make placeholder space for missing images, so you can see their shapes, but Firefox just doesn’t. It’ll only be as big as the alt text. So that’s normal… possibly your only problem is Firefox not actually getting the images.
This might sound like a stupid question but are you allowing images in Firefox? When I got the newest one I found a place in Preferences where you can just turn all images off for all but whitelisted sites (or leave them on but turn them off for blacklisted sites). Does FF show images on other sites?
Your site is live on a server or on your desktop?
Thanks, Ryan,
My images show up fine in Chrome and IE. Firefox is my default browser and all other images, ads, incoming photos, outgoing photos etc show up perfectly. The in progress site is not uploaded to the hosting service and it is FF based. The links are long and since they work in the other two browsers, it makes no sense for them not to work in FF. I will check the properties because when I am doing a preview, no other information-photos-ads etc show up. That could be the problem.
Well without a link we can’t really help you unfortunately unless you make sure your settings aren’t screwing with anything :). But you are getting other images so…it probably isn’t a setting issue.
We will need a link so pleas uplaod it to your host
Edit:
10,000th post
I’ll have to jump ahead about half the book to follow the upload directions. It’s a long ways from looking professional in fact, quite awful. I know I said it was looking OK, but that meant it was so far working except…The temporary template that was uploaded when I bought my site is really awful as well…
Don’t bother worrying aboujt how good it looks :). I’ll place my bets that we have had worse here lol :). Besides, we all coded bad when we were new and just starting lol :).
Uploading is real simple so that shouldn’t be too hard / time consuming.
Shari, here’s a truly bad site, just for comparison:
Those guys actually market their design. I doubt yours reaches the depths of awfulness that this one plumbs. 
Firefox should display the placeholder boxes if we include HEIGHT and WIDTH attributes, no? (I get the “Captain Obvious” award for the evening, I think.)
Off Topic:
Black, I must admit I was surprised to find a doctype at the top of thehir page, however I WASN’T surprised to find it was incomplete :). I have seen that site before. It’s utterly disgusting. Being a code geek my stomache turns when I see the code
Off Topic:
I showed that site to a friend who designs sites as a hobby. She actually screamed…
>>> It displays exactly as coded in both Google and IE.
>>> In Firefox all photos are missing.
Can I re-phrase the above sentence to the following:
I have optimised my site to run in Google’s Chrome and IE but my photos are missing in Firefox, etc
May I recommend running your site in Firefox and using the following addon:
http://users.skynet.be/mgueury/mozilla/
This is a very handy utility that instantly shows all HTML errors and warnings. Once all the errors and warning are removed there is a very good chance that your script will run in all browsers.
.
NOPE.
Try it. I always (or almost always) include height and width attys in my images. If I turn them off (either via the toolbar, edit preferences, or by adding an extra . in the path), they collapse to height/width of the alt text, if any.
Off Topic:
Max why did you forget Evan Goer’s HTML HORROR and [url=http://www.dokimos.org/ajff/]RAINBOW JESUS??
And I can’t see the OP’s site since it’s not online, I would still wager that if it looks terrible in FF that may partially be due to the images not taking up the amount of space they do in the other browsers.
Shari, can you post an example of some HTML from your site that shows an image path?
Oh and I should follow up on John’s message: if you want to download plugins you can but you SHOULD validate your html and css.
Firefox treats the alternative text content as (properly, I think) inline text. Inline elements have neither a width nor height property or attribute. If you make the img some sort of block-like element, e.g. block, float, inline-block, table, inline-table, then the dimensions will apply.
cheers,
gary
Gary, is this what you’re saying?
.makeimgblock {
display: block;
}
[highlight=“HTML 4.01 Strict”]<img class=“makeimgblock” src=“images/mypic.jpg”>
(Sorry, I have to make it stoopid so I can keep up.)Gary, is this what you’re saying?
.makeimgblock {
display: block;
}
[highlight=“HTML 4.01 Strict”]<img class=“makeimgblock” src=“images/mypic.jpg”>
(Sorry, I have to make it stoopid so I can keep up.)
[ot]Stomme, I've looked for Rainbow Jesus for a year. Thanks! Let's see if I can make my friend have an aneurysm....[/ot]
Edit: Sorry for the dupe posts. I'm doing three different things at once and apparently not doing any of them correctly.Nicked from the plugin site:
HTML VALIDATOR (based on Tidy and OpenSP)
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.
The extension is based on Tidy and OpenSP. Both algorithms were originally developed by the Web Consortium W3C. And now extended and improved by a lot of persons. Both algorithms are embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.
HTML Tidy is a helpful program that tries to help people to correct their HTML errors. It finds HTML errors and classifies them in 3 categories:
errors: HTML errors that Tidy cannot fix or understand.
warnings: HTML errors that Tidy can fix automatically
(optional) accessibility warnings: HTML warnings for the 3 priority levels defined in W3c WAI
OpenSP, is SGML parser, is a professional algorithm. It is the same program running inside http://validator.w3.org/. And now, you can embed it in Firefox !
There is also an automatic “Clean up” button that will do his best to propose you a cleaned version of your page, without errors.
I forgot to add that not only but also when the icon is clicked the plugin displays the following information in 3 resizeable panels in a popup:
- panel top center - source code
- panel bottom-left - errors and warnings
- panel bottom-right - help and suggestions on fixing the error or warning
Also forgot to add the plugin is free and accepts donations.
.
Right, now here’s a long shot and i mean a loooooong shot
I’ve seen similar issues before, where certain browsers would load certain
images and others wouldn’t. I hope the following is your problem, as you didn’t post the code or an url so i don’t know if you’re using the pic’s as background in the css but i assume you do:
In the cases i’ve seen Windows IE7 understood the following:
background-image: url(root/imageFolder/image.jpg);
But FF3 wouldn’t show it. Seems that adding quotes around the file location (it SHOULD be a string, after all) solved it:
background-image: url("root/imageFolder/image.jpg");
Maybe this solves it for you?
Otherwise, post the full css and html or an url and we will solve it for you
[ot]
This is the site Tommy Olsson is going to go to when he passes to the Great Beyond, unless he behaves. Be warned, Tommy. ;)[/ot]
Have we done enough thread hijacking here? (By “we,” I mean “mostly I.”)
This example displays images in trident/webkit, but not mozilla.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Test</title>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images\\logo.gif" width="100" height="100">
</body>
</html>
“IE automatically changes \ to / if and only if the \ is not before the root.”
Webkit mirrors the same behavior with URIs.