On some content rotators, while the page is loading and the javascript is rendering the rotator, all the elements of the roator are layered on top of each other, so the text is layered on top of each other and looks like a mess…
Javascript is executed line by line as the HTML document is read, so what you can do, is hide the text with javascript at the top of your HTML page, and then fade it in at the bottom of your page, meaning that when your page loads, the text won’t all be visible until everything is ready to be displayed:
Add to beginning of <head>
<script type="text/javascript">
document.write("<style type='text/css'>.headerText{display:none;}</style>");
</script>
And add this to the bottom of the footer, before </body> if possible:
<script type="text/javascript">//<!--
//$(window).bind("load", function() {
// you can uncomment these
//two things to load this script when the page finishes loading,
//but that could add to a delay in the text being shown...
$('.headerText').fadeIn('slow', function() {
// Animation complete
});
//});
//-->
</script>