cross browser marquee restarts before finishing

[digicode]

1) Script Title: cross browser marquee
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee.htm
3) Describe problem:

We provide the "Cross browser marquee script" as an application where people can put their links in.
In some occasions (using IE) the scoller will not scroll trough the most left boundery, it will restart itself from scratch when it reaches the left boundary.

The actual page where the script lives is at:
http://msgboard.digicode.nl/app/disp...nes=6&layout=4
(The parameters are used to select the proper board, colors and template)

Users using this application must put some generated iframe code onto their websites to show the marquee.
the generator page (in dutch only): http://msgboard.digicode.nl/digilinkgen.php
I have seen some occasions where the included iframe does not scroll as it should.
Sometimes it will scroll fine after hitting the refresh button a few times tough, using FireFox the marquee runs fine.

Try to put this iframe onto your website where some other content lives in order to see the failure.
I do have some url's with the faillure but due to the rules of this board i am not allowed to post them here.

<iframe framespacing=0 frameborder=0 scrolling=no src="http://msgboard.digicode.nl/app/display.php?board=19&bgcolor=98A0B0&link=1C1D1D&lines=6&layout=4" height="20" width="610"></iframe>

I am getting confused since it seems that the behavior of the iframe could differ depending on the actual source of the mainpage.
The url mentioned in the iframe always scrolls fine if you put it in a separate browser.

Any ideas?

Sven de Jong
Digicode.nl

[jscheuer1]

I am getting confused since it seems that the behavior of the iframe could differ depending on the actual source of the mainpage

Most likely, that is the problem then. IE treats <center> and <p align="center"> etc. differently than most other browsers, especially when it comes to content absolutely positioned within a relatively positioned element as these marquees are. What IE does is move 0 to the center under these circumstances, throwing off the entire positioning calculation.

In most cases, placing a <div align="left"></div> around the script on the main page should take care of this:

<div align="left">
script goes here
</div>

Better yet, don't use "center" in your markup (it has been deprecated for this and other reasons). There is a better way to achieve centering of content:

<div style="width:450px;margin:0 auto;">
450px wide centered content can go here, for instance a marquee.
</div>

However, for this to work in IE, you must use a DOCTYPE.

[digicode]

I have tried both proposed solutions, but it's still not working well.

[jscheuer1]

Well, when I:

Try to put this iframe onto your website where some other content lives in order to see the failure.

I don't see any problem in IE. I think you will have to make up an example page where there is a problem and provide a link to it.

[digicode]

Hereby a location where you can see my issue

http://homeshop-online.com/

In the middle pane almost at the bottom you will find the scoller with the black background, just above "link toevoegen".

The iframe is included here using the below code:

<p align="center"><iframe framespacing=0 frameborder=0 scrolling=no src='http://msgboard.digicode.nl/app/display.php?board=12&bgcolor=000000&link=FFFFFF&lines=1&layout=3' height='25' width='300'></iframe></p>

[jscheuer1]

It does have something to do with the containing table. So much of your mark-up is invalid though. I was able to get it to work properly only by removing the table. I was unable to find a way to fix the table. There may be some way. I did not take the time to rewrite the page using all valid HTML as, even that might not fix it. The external marquee page is also invalid but, this does not appear to be the problem. I also noticed that if the iframe were reloaded, it worked OK. This can be done using an additional script on the top page -

First give the iframe a name:

<p align="center"><iframe name='mframe' framespacing=0 frameborder=0 scrolling=no src='http://msgboard.digicode.nl/app/display.php?board=12&bgcolor=000000&link=FFFFFF&lines=1&layout=3' height='25' width='300'></iframe></p>

Then put this script at the end of the page, just before the </body> tag:

<script type="text/javascript">
function liframe(){
window.frames['mframe'].location.href=iloc;
}
if ( typeof window.attachEvent != "undefined" ) {
var iloc=window.frames['mframe'].location.href;
window.frames['mframe'].location.href='about:blank';
    window.attachEvent( "onload", liframe );
}
</script>

For the most part this will only do anything in IE. If some other browser does execute it, it shouldn't cause any problem in that browser.

[digicode]

Hi John,

Many thanks for you help so far.
At least I've got our marquee page now 100% W3C compliant as validated at http://validator.w3.org/
I had to change some little qoutes and tags to make that happen.

I also noticed that if the iframe were reloaded, it worked OK.

Like I mentioned in my very 1st description, I'd noticed that too.
However, if you refresh more often it will run sometimes ok and sometimes not ok. A single iframe refresh won't do the trick always.

I have pointed my client to the w3 validator page in order to check their page as well. Another client is using a doctype [XHTML 1.0 Transitional] so I modified the iframe include for them a little bit. No reaction from them so far.

It's still making me crazy.......

[jscheuer1]

I also noticed that if the iframe were reloaded, it worked OK.

Like I mentioned in my very 1st description, I'd noticed that too.

Not the same thing. This is what you said:

Sometimes it will scroll fine after hitting the refresh button a few times tough

I was not talking about the refresh button, rather refreshing only the iframe itself. No matter how many times the iframe is refreshed, at least on your example page, it runs properly. The code I suggested be used only refreshes the iframe, not the top page.

Validating the code for the top page may not solve the problem but, if it doesn't, it may make the problem easier to spot.

The example top page you supplied has many nested tables for layout. Tables should only be used for tabular data. However, to get a nice three column layout using only valid HTML and no tables is a real challenge for some people. Here is a link to many examples:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

I'm not sure if XHTML 1.0 Transitional supports iframes, I tend to think not. However, your client should probably be using HTML 4.01 Transitional unless he/she is serving true XHTML, which is very unlikely as most browsers do not support it.