I am writing some new code for our web page and for the first time, I am using transparent gifs to color in cells in tables. Sometimes when I load the page to see how I'm progressing, it loads with the little missing images icons. I hit refresh and it clears up. I'm currently loading and testing the page from my hard disk. I am using the following sytax for the images:

IMG src="images/clear.gif" width=2 height=15 align=ABSBOTTOM alt="" HSPACE="0" VSPACE="0"

I can't understand why the page doesn't load properly consistently. If Explorer couldn't find the images, it would seem like it would never find the images. But it only does this occasionally. And then refresh fixes it.

Anyone know why this is happening?

Could be that you had an older version of your page in browser cache, that didn't have the latest correct image links. Refreshing usually forces the browser to get the latest page.

It does it for every transparent image that I have on the page but loads the regular images just fine. I guess it could be a cache problem, but I just hate to put a page up that may load poorly from time to time. I've never had this problem before when working on pages. But, like I said, this is the first time I've used the transparent images in tables.

Well I assume at some point during your test, the image url was wrong and that its a cache problem affecting that one image (used multiple times) however, once you have forced a refresh of the page, and so long as the image url doesnt change again, there shouldnt be an intermitent problem as your post suggests. However, that could be due to your windows version and how IE is storing temporary internet files and whether or not you have multiple folders for your cache within the temp. internet files folder. If the older version has been cached in a couple of different folders, then a few refreshes might be in order to get the most recent page. Perhaps if it happens again, choose the 'view source' option and verify that its looking for the right image and that it is the latest version.

-Z-

Are you using a web server? I know that sometimes with my local web server, images don't always load. I use apache and sometimes liteserv. Something to do with the speed the local pc is processing the code through the web server. However, online it always works properly.

It might be a cache issue as well...probably...

Posted by Zoggles
Perhaps if it happens again, choose the 'view source' option and verify that its looking for the right image and that it is the latest version.If you aren’t sure whether the problem is caused by cache, it might be easier to clear it and see if it helps.

I cleared the cache and then loaded the page repeated without making any changes to it. Out of the 75 to 100 times that I loaded it, it only loaded with the transparent image missing once (the other images loaded fine).

I'm assuming it must have something to do with the cache. Since it appears to happen so rarely, I'm going to just press on. Perhaps during the process of finishing the pages, the problem will make itself more clear.

Thanks all for the help.

Another thought... I was searching through the Internet this morning and I ended up on a page that had a whole list of images of diskettes in a row. None of them displayed when I first loaded the page. I hit refresh, they all drew. I double-checked my brower's setting and I have "Show Pictures" checked, so this should not have happened.

Do you think Explorer has a problem with repetitive images? In other words, when the same image is displayed multiple times on the same page. I'm beginning to think that perhaps my problem is not with the transparent images, but with the fact that I am using that same image repetitively.

Is it possible Explorer doesn't always handle loading repetitive images correctly?

I've seen this problem too and concluded that it was probably a bug in explorer. It definitely seems to have trouble refreshing images correctly but it's not clear why the problem occurs since it's intermittent.

Yes, I think it is something in Explorer. I don't know about Netscape since I haven't tried it. But since most people use Explorer, I'm trying to make sure it is compatible with that first.

I renamed one of my repetitive transparent gifs with a unique name and when the problem occurred, none of the transparent gifs drew except for the one that I renamed.

So I'm going to have to think of a workaround. Obviously, I could name 25 to 50 transparent gifs with unique names, but that seems wasteful (and perhaps slow, but they are small so maybe not).

I've also seen this many times and just concluded it was a bug in explorer. Other images show up fine. I never thought about the connection of it being duplicated images that only have the problem. In that light, your idea of changing the names of the images sounds like a good idea (since you've tested it and it seemed to work). The only problem is it's difficult to maintain pages like that. However, I might have a solution...

My entire website is done in PHP (there are no static HTML pages). In every PHP page, I include a file with some commonly used functions. I got sick of typing "<IMG SRC='/images/spacer.gif' WIDTH='20' HEIGHT='1'>" everything I needed a spacer. So, I wrote a PHP function I can call. If I write "<?=spacer(20,1)?>" it does the same thing (for those not familiar with PHP, the <?= ?> means "execute this code, and print out the result"). What I could do is have a counter that is maintained by the spacer function (or use a random number), and everytime spacer is called, it returns a unique filename (ex: '/images/spacer_142.gif').

The second part of this trick would rely on using the apache mod rewrite module in an .htaccess file to transparently point every request to the spacer.gif file. It would be something like (I haven't checked this syntax):

RewriteRule spacer_.*\.gif spacer.gif

I've never used PHP, but the concept sounds like it would work.

The other issue to consider is that the user now has to download each image individually (the browser doesn't know they are the same). Not a huge deal. My spacer.gif is 67 bytes. I don't know if it's possible to make it smaller. At that size, about 15 spacers adds up to about 1KB. A 28.8 modem transfers about 3K/sec. So if you have a page with 45 spacers, you'll delay the user by about a second. Thats not a major issue to me, but it's something to be aware of if you have a highly formatted page with a couple hundred spacers. However, if your page is that formatted, you probably have a lot of HTML to send the user, so a 5 second delay or less is probably minimal on top of everything else.

So perhaps this isn't an issue under any circumstance, but I thought I would bring it up.

I would advise against using the concept of spacers and images to color cells entirely. These sorts of hacks aren't really necessary anymore, especially if your target browsers are Internet Explorer 6 and Netscape/Mozilla/100 other variations of the exact same HTML renderer. If you want to color in cells, or even use background images, there are specific CSS properties that can do this, and most of them will work to a sufficient degree (to increase chances of them working, always put all your CSS in classes, never use style=). If you fiddle with the HTML long enough and try several approaches to the same problem, you can eventually get it right. I'll just hit Submit Reply before I launch into a rant about browsers and standards incompatibility.

I don't use it for coloring cells. Rather, I use it to enforce a minimum cell size. If you have several cells in a table, and some of them have large images, most browsers will chose to shrink your empty cells to make everything fit, and that can severely screw up formatting. You can specify a width and height in the TD tag, but that doesn't always work. The best way I've found is to put a 1 pixel transparent gif into the cell and stretch the gif to the desired dimensions.

There are a few things that CSS won't do reliably with cross-browser pixel perfect spacing with padding and margins is one of them (especially with tables and divs). I often use transparent spacers to enable the page and graphics to line up and look the same on almost all browsers, and I've always used IE as my preferred browser but I've never had the problem of them all not showing up when by rights they should have.


Actually - offtopic slightly, but I would be curious to know (from all those who have web stats on their software sites) what percentage of visitors are not using IE5+ or NN6+ and their equivalents. I assume that some older casual gamers may well be running on the older and lower spec machines and haven't updated their browsers, but I could be wrong.

-Z-

The Web Browsers Used to Access Google (http://www.google.com/press/zeitgeist.html) should give a good indication for you.

Well no not really, Google isnt a fair indication of the casual gamer, and what browser they are using. My art site had a very high percentage of top end browsers, yet my other sites had far more old browsers even down to NN3 and IE3. I was particularly curious about shareware software sites.

-Z-

Originally posted by JC3D
The Web Browsers Used to Access Google (http://www.google.com/press/zeitgeist.html) should give a good indication for you.

Those are some great stats. Didn't know they existed.

Originally posted by Zoggles
Well no not really, Google isnt a fair indication of the casual gamer, and what browser they are using. My art site had a very high percentage of top end browsers, yet my other sites had far more old browsers even down to NN3 and IE3. I was particularly curious about shareware software sites.

-Z-

Here's the stats from our shareware site:
MSIE 6.0 71.8%
MSIE 5.5 10.9%
MSIE 5.0 5.2%
MSIE 5.01 3.5%
Mozilla/5.0 2.2%
DA 2.1%
Mozilla/3.01 1.8%
Others 2.4%

Originally posted by LordKronos
My spacer.gif is 67 bytes.

How did you make it so small? And can I use it?

Originally posted by Lizardsoft
I would advise against using the concept of spacers and images to color cells entirely.

Is there another (better way) of coloring cells entirely other than spacers or CSS? I only know basic HTML at the moment.

http://zoggles.dyndns.org/zoggles/images/main/trans.gif

43 bytes. 1x1 transparent gif. Use that if you want TJM.

Thanks for those stats.. looks like theres around 6% not running 5+ browsers then.

-Z-

Originally posted by TJM

--------------------------------------------------------------------------------
Originally posted by LordKronos
My spacer.gif is 67 bytes.
--------------------------------------------------------------------------------

How did you make it so small? And can I use it?

Not sure how I made it that small. I created it years ago (probably 7 or 8 years ago) and have just copied it from project to project ever since.

However, I am now horrified as I just realized how many 10's of Kilobytes of bandwidth I must have wasted over the years :) I just opened Photoshop, created a new 1 x1 pixel image with transparent background, saved as GIF, and I ended up with 49 bytes. Then I went to take a look at the color table, and I realized there is a white and a black palette entry. What a waste! Deleted those, and it's now down to 43 bytes. Woohoo!!!! I wonder if it can get even smaller.

Sure, you can use my new 43-byte spacer.

Edit:

OK. I tried twice, and for some reason the message board doesn't seem to want to upload the GIF. So lets try this. Download it from my web site (right click on the link and choose "Save Target As"):
http://www.kronos-software.com/images/spacer.gif

Thanks, LordKronos & Zoggles, for those tiny gifs. Since I've got 40+ on my front page, that's going to make it load faster.

Just a word of warning about those stats...Opera and some of the other browsers allow you to identify yourself as I.E. X.0. So they aren't as accurate as they appear.

I just checked the size of the spacer image I've been using for years now. It's 42 bytes. If anyone wants it, here it is: http://www.howintheworld.com/imagine/spacer.gif (right click and "save as").

Jak

I've never needed spacers, but depending on what you are looking for with compatbility, you might need them. Two things to note:

1) If you want pixel precision, setting all 4 margin and padding properties goes a long way. The settings on surrounding elements can affect this too (try CSS on H1 and P elements to see how the browser assigns some defaults).

2) IE (and possibly NS, haven't examined its behavior for this) tends to determine table cell height by font size, even if there's nothing there! Setting font size to something tiny has helped me out in the past.

There's tonnes of little tricks like this. I would use spacers as a last result because they are a hacky solution with its own problems (like the image bugs you were experiencing). If you are aiming to support NS4 you have a lot more excuse to use things like that (might want to make separate text only page for NS and mobile, kill two birds with one page). I've managed to solve a lot of interesting layout problems just by taking a different approach to the solution.

Originally posted by Jak
I just checked the size of the spacer image I've been using for years now. It's 42 bytes.
:mad: ....and after I did a Google search and a bunch of sites said the absolute smallest size for a transparent GIF was 43 bytes! I'd like to see the file format spec so I can see what the difference is between these 2, since everybody didn't think 42 was possible.

But thanks. Maybe now I can save myself another 2 cents a year on bandwidth costs.