Centering text screws up Javascript effect

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have taken over the support of an existing webpage and I need to revise
the page so that it is centered (left and right) on the screen instead of
aligned on the left.  I can do this easily, but there is a little JavaScript
that doesn't work correctly after I center it.

I have tried to realign the page with either <center> tag or align="left"
attribute, but the pictures displayed with the JavaScript get messed up with
everything I've tried.  Also, the JavaScript doesn't seem to work at all
when I view the page with Firefox 1.0.6.

It's relatively simple page; could someone offer a suggestion for centering
the text and keeping the pictures displayed correctly?  Any idea why it
doesn't display the pictures right in Firefox?

thanks, the page is

Re: Centering text screws up Javascript effect

Quoted text here. Click to load it

I tried setting align="center" on the two top-level tables
(alternatively set style="margin: 0 auto" on them), and it seemed to
work OK in Firefox. What's the JavaScript problem?

Quoted text here. Click to load it

Looks like the problem is with the values you're assigning to, which should be a number between 0 and 1 not a

Change = 0 + '%'; = opacity + '%';

to = 0; = opacity / 100.0;

Re: Centering text screws up Javascript effect

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:

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

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.

Does the new posted file give you any more ideas?

thanks,   BDT

Quoted text here. Click to load it

Re: Centering text screws up Javascript effect

Quoted text here. Click to load it

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;


#img1 {position:absolute; width:572px; height:100px; z-index:1;
#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

Quoted text here. Click to load it

I'm not seeing that, the two images seem to interchange at a consistent

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.


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".

Site Timeline