Browser Compatibility Issues with Images

[Alicia.KPL]

Hey everyone,

First off I'd like to say I have a very basic understanding of html and css, but not a whole lot, what little I do know is what I taught myself back in high school. Anyways, since I do have a basic understanding, my boss asked me to get the company's website up and running. We are a fruit and vegetable processing facility.

This is the site: www.kingsprocessing.ca

The website is now public, and we thought everything was great besides getting some new pictures, etc (easy stuff). The site worked in all browsers I tested it in, and then we decided to add nutritional labels for our products and a community events page to let the public know some of the things we do in the surrounding area.

Now, about 1/3 of the nutritional labels work, and the rest don't. They are added in as pictures (bmp files) that open in a new link. The site was set up using Joomla, so uploaded the nutritional labels to the media manager, then added a link to these images on each page.

The pictures on the community events page (under news) also are hit and miss if they work or not.

I can't seem to find the issue. All open in IE7, open sometimes in IE8 and chrome (seems on and off if it wants to work which is odd in itself) and can't get them to open in other browsers.

Here is one that works: (try and open the nut. label)
http://kingsprocessing.ca/index.php?option=com_content&view=article&id=81&Itemid=30

Here is one that doesn't work:
http://kingsprocessing.ca/index.php?option=com_content&view=article&id=96&Itemid=30



Anyone have any ideas on how to solve this? Is it an issue with the template I'm using? The company that set up the site had most of the stuff set up, I just had to make new pages and fill in the information. If there is any other information you need, just let me know and I'll see what I can find.

I appreciate any and all feedback or ideas. Nothing I've tried seems to work.

Thank you,
Alicia

[mavigozler]

1. I am getting 404 error on the nutritional label that does not "work" as you say. You are running an Apache server but on what OS? Unix/Linux hosts have case-sensitive URLs, I believe. You have given lowercase URLs to the image filenames and extensions...make sure they are lowercase on the file system.

2. BMP files? Those present significant problems. For one they, they are too large (because it is an uncompressed format) and can cause your host to overwork. If an image file is a photo, use JPG format, and try to keep image sizes to less than 200 K, unless you specifically give a link to a large-sized image file and tell the user so. If the image file is a graphic (not photo), use GIF, since it at least provides compression. It has a maximum of 256 colors (which is why it is NOT suitable for photo-type images), and most graphics-type images don't have more than 256 (in fact, they probably have not more than 16 or even 8 colors). Someone may tell you that GIF is a "proprietary format" but that is nonsense (all claims on patents are expired). An alternative compressed format is PNG. It is probably the case that all of these file types are readable by nearly every possible browser.

3. Want to see how a page looks on as many browsers as possible (http://browsershots.org/)?

[Alicia.KPL]

You are running an Apache server but on what OS?

OS = operating system? This computer is windows (version 5.1). I've been using IE7 to do the modifications to the site. I used chrome once or twice, but found I was actually running into some issues and had to re-do it all in IE7 for it to work.

1) Thanks, I'll check, I think some were saved originally with upper case letters here and there, so I'll look into that one right away!

2) They labels were given to me in bmp format and I never thought of it, but I'll switch them over to gif as they don't have much color to them. Thanks for the information! Useful to know.

3) I've been using http://www.spoon.net/Browsers/ to check since I can actually move around the site, not just get a screen shot since most of my issues so far has been with links not working. I did try browser shots though, but I liked the Spoon.net better :)


Thank you so much for your reply - I'll try your suggestions out and will let you know how it goes!

[Alicia.KPL]

So, found something in the coding...
Edit = Joomla edit article manager (toogled editer to html)
IE7 = Viewed page source and copied from that code
Chrome = Page source


Edit: <img src="images/stories/creamyedit.jpg"
IE7: <img src="/home/images/stories/creamyedit.jpg" works
Chrome: <img src="/images/stories/creamyedit.jpg" doesn't work

So, made a change in edit just to see:
Edit: <img src="home/images/stories/creamyedit.jpg"
IE7: <img src="/home/home/images/stories/creamyedit.jpg" doesn't work
Chrome: <img src="/home/images/stories/creamyedit.jpg" works


Also - another thing I noticed. Only the pictures and labels I have added since we launched the site (made it public type thing) are the ones I'm having issues with. So, any images I uploaded since the launch are not working in other browsers.

Also, noticed the site still has super long names http://kingsprocessing.ca/home/index.php?option=com_content&view=article&id=27&Itemid=30

But I want something like this:
http://kingsprocessing.ca/products (or something similar)

Did some research (aka googled it) and found lots of people talking about OpenSEF to fix this. I'm using Joomla 1.5 so, this won't work with it.


I have a feeling all these are tied in together. Any thoughts?

[mavigozler]

Are you talking about the various strategies involved in managing web site content: web (HTML) docs, associated images and objects, stylesheets, script files? Your home page (index file) always needs to be updated to include new links for added web docs. For example I have an opinion-based site that in which new "opinions" (essays, blog-like articles) get added and I want them to show up in the home page/index file. Instead of editing the index html page directly, I instead update a MySQL database with the article information, and then make the index page a PHP script to read in the fields and present whatever articles are present within a listing of the index PHP page.

I have never used Joomla or other CMS and don't know what it is about, but I suspect that this helps you do that. Those long URLs are likely generated in your index (home) page by the Joomla system which probably works with PHP and whatever database it uses (probably MySQL). It takes out the work of you writing your own HTML forms to interface with a MySQL db to update/insert/delete all the content of your web site. Perhaps you are not properly registering your content (like images) so that it can be delivered with its associated markup. If you are unfamiliar with the CMS, it could explain some of your troubles.