Animated Gif problem - Aaargh!

[Gee]

I've been having a problem with an animated gif for my site. You can see it here: www.woodpig.com

As you can see, it's not complicated. However, depending on what browser I view it in, I get a glitch (the image shifts back and fore and bits get misaligned).

I've checked that all the frames line up properly, and everything else I could think of, but no success.

It seems to work OK in Explorer, but in Netscape and Firefox I get the glitch. To confuse matters even more, when I view the image in Netscape or Firefox on it's own (i.e. not imbedded in the webpage, but just the image), then there isn't a problem!

Can anyone help?

Thanks.

Gareth.

[KDLA]

Why do you have this javascript?

<script language="JavaScript">
<!--

/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
Over 400+ free JavaScripts here!
Keep this notice intact please


function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="woodpig_logo.gif"
myimages[2]="woodpig_logo.gif"
myimages[3]="woodpig_logo.gif"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" alt="Click to Enter" width="313" height="313" border="0" align="middle">')
}
random_imglink()
//-->
*/
</script>


- If you're using random images, why are all these in your array the same file?
- You've used "/*" to comment out your js. That's for CSS, not JS. You need to use "//" at the beginning of each line.
Reference: http://www.tizag.com/javascriptT/javascriptcomment.php
- You've also got a preload images javascript.... I really think you've "over-js-ed" this code.
- Also, you need a DOCTYPE declaration. That won't effect your image, but it is something your page needs.
Reference: http://www.w3.org/QA/2002/04/valid-dtd-list.html

I suggest you take out all the javascript, then see if the problem disappears. ;)

KDLA

[Gee]

Thanks for the suggestion. I don't know why you're seeing half of that code - I took it out earlier...?

Anyway, I took the image preloader out and it made no difference - any other suggestions?

[Centauri]

I looked at it before and after the javascript removal, and have not seen the glitch you describe. I'm using Firefox 1.5. May be a glitch in your browser??

Cheers
Graeme

[Gee]

Well, I get the same glitch in Netscape. Perhaps you missed it: have a look at the lettering around the logo. THe glitch makes them slighly jagged.

[Centauri]

Nope, lettering is fine on my machine......

[Gee]

Hmmm...

I'm running Firefox 2 - could that make a difference? If, for some reason, my version of Firefox has become corrupt, what is the quickest way to fix it without losing any bookmarks, settings, etc.?

[Gee]

Right, I've uninstalled and reinstalled Firefox, and that hasn't made a difference (besides, I'm still getting the same problem in Netscape).

These are the only possibilities I can think of:

(1) Somehow, I've created the gif in a way that gives Netscape and Firefox a problem (so, changing something about the gif should fix it).

(2) Something about the design of the webpage is causing a display glitch in those two browsers.

(3) Some other program or process - e.g. my firewall, or something - is causing the glitch.

One thing I have noticed, however, is that I have been using <div align="center"> to centre the image. When I take this out (and the image defaults to the left), the image is fine.

I am going slowly crazy...

Thanks to all,

Gareth.

[Centauri]

The align attribute, along with quite a few others used, are long outdated, so maybe upgrading the page to current standards may work. First off, it needs a valid doctype - I suggest html 4.01 strict. Next, the positioning and look should be defined by css styling. As this is an entry page, which does not share the same layout as other pages, css within the html is probably the best here. Centre positioning of everything other than text should be done with auto side margins, and tables should not be used for layout.

A quick redo of the page could be :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Woodpig.com - Original Artwork and Illustration.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">

<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}
p {
text-align: center;
margin: 15px 0;
}
#enter {
display: block;
background-image: url(pics/woodpiglogo3.gif);
width: 381px;
height: 354px;
font-size: 1px;
text-indent: -1000px;
margin: 0 auto;
}
-->
</style>
</head>

<body>
<br>
<h1><a href="about.htm" id="enter">Click to Enter</a></h1>
<p>All images Copyright &copy; G.J.Southwell, 2007. All rights reserved.</p>
<p>Please note: Some images contain nudity.</p>
<p><strong>Click the logo to enter.</strong></p>
<!-- PayPal Logo -->
<p><br><a href="#" onclick="javascript:window.open('https://www.paypal.com/cgi-bin/webscr?cmd=xpt/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');"><img src="https://www.paypal.com/en_US/i/bnr/horizontal_solution_PPeCheck.gif" border="0" alt="Solution Graphics"></a></p><!-- PayPal Logo -->
<p><img src="/cgi-sys/Count.cgi?df=woodpig|display=Counter|ft=0|md=7|frgb=100;139;216|dd=E"></p>
</body>
</html>


See if this page settles down the animation.

Cheers
Graeme

[Gee]

You're a star!

That seems to have fixed everything.

However, what does "#enter" mean? SHould that read "center"?

Thanks for your time, Graeme - it really is appreciated.

[KDLA]

Hey now -- I had recommended the DOCTYPE change, too... no star for me? :( :D
Glad you got things working!

KDLA

[Gee]

Sorry!! Thanks for your time and efforts! You're a star too!!

[Centauri]

However, what does "#enter" mean? SHould that read "center"?

The #enter is the id of the <a> tag associated with the logo. As the link is to "enter the site", I used an id of "enter". Take note of what I did there - in the html, the link appears as a h1 size heading of "Click to Enter", which means vision-impared screen readers will know what the link is about. The actual graphic is not applied until the css, which also sets the size, position, and shifts the text so it cannot be seen. This way, presentation is removed from the html, and it semantically has more meaning.

Cheers
Graeme

[Gee]

Ah! I'm afraid my CSS knowledge is quite basic. Thanks once again, Graeme - and to everyone else!