On 2006-11-10, BT <no@xnono.comwrote:
Thanks for the assistance. I'm sure it is hard to see the problem without a
full page of images, etc to see. I went ahead and made the changes to align
the two top level tables so you could see them and posted the page as:
www.crhschoir.org/index-center.html
Here you can see that the set of fading images is not centered and it
partially overlies a static copy of one of the images that IS centered. The
code includes the fading images affected by the script as div id="img1"
and div id="img2" , but the static image is listed in the next line of
html. When it is on the left side of the page, the images overlay and you
never see the static one. I'm guessing this was set up for displaying the
static image to people who have javascript turned off. Still, it looks like
the javascript fading images are not centered and I still can't figure out
why.
I see, I probably would have noticed that was the problem if I'd been
paying more attention.
Anyway, it's happening because #img1 and #img2 are absolutely positioned
at 198px left of their container (the body probably, something outside
the table anyway). So they stay put even when the table is centered.
The fix is to change
#img1 {position:absolute; width:572px; height:100px; left:198px; top:100px; z-index:1; visibility:hidden;}
#img2 {position:absolute; width:572px; height:100px; left:198px; top:100px; z-index:2}
to
#img1 {position:absolute; width:572px; height:100px; z-index:1; visibility:hidden;}
#img2 {position:absolute; width:572px; height:100px; z-index:2}
i.e. get rid of left and top. Then the images just get their "static"
position, which is inside the table cell where they belong.
If this proves unreliable in some browsers-- it works in FF, but I
haven't tried anything else-- which it may do as according to the spec
the UA is free to "guess" the static position for unspecified absolutely
positioned elements, make them both top: 0; left: 0 and wrap them in a
relatively positioned div where they appear in the table. i.e.:
<td width="572">
<div style="position: relative" <---- insert "wrapper" div
<div id="img1"...>
This way the relatively positioned div provides a container for the
absolutely positioned #img1 and #img2 to be positioned 0 from the top
and 0 from the left of, and itself sits in the table cell in the normal
way.
Also, the fix for Firefox does get the images to fade in/out, but after a
complete cycle the two images flash back and forth 8 times in about 2
seconds. It doesn't flash like this in IE6.
I'm not seeing that, the two images seem to interchange at a consistent
speed.
I do think it's nicer style though to take the call to setTimeout out of
FadeImg and replace it with a call to setInterval outside FadeImg.
i.e.
function main()
{
setInterval("FadeImg()", speed);
}
onload = main;
Don't know if it will make any difference.
This will mean editing below where it says reassuringly "You don't have
to edit below this line".
