Scoller text wrap

[Jenifa]

1) Script Title: Pausing Up Down Scroller

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

3) Describe problem:

I can get it to display perfectly in IE but in Firefox it won't wrap the text to fit in the box.

Can anyone help?

[jscheuer1]

Since, on the demo page, the first example scroller has wrapping text that wraps perfectly well in both IE and FF - we would need to see your page to see why this is not the case with it. Do you have a complex layout? An absolute or relatively positioned wrapper? Many align="whatever" attributes? These things and several others can have farther reaching consequences than you might at first realize.

Also, if you are used to designing for IE, it could be that you've done something that only IE recognizes in the way you intend.

Please post a link to the page on your site that contains the problematic script so we can check it out.

[Jenifa]

http://www.luka.com.au/index2.htm

Any help would be appreciated!

[jscheuer1]

There is a coding error, this has nothing to do with the problem but, should be fixed, here:

script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)

</script></td>

Since you are using only one scroller on the page, the red part above which refers to a second scroller should be removed.

Now the layout problem that you are experiencing is happening because FF interprets this:

    <td height="425" nowrap><table width="100%" height="398" border="0" cellpadding="0" cellspacing="0" id="producttable" >

which is technically valid (not sure why IE ignores it), to mean don't wrap any text after here. That is exactly what is happening in your scroller, no text wrapping. Just get rid of it (the nowrap).

[Jenifa]

All working now.

Thanks so much!

[Jenifa]

Actually one more small problem.

Apparently it isn't displaying perfectly on MAC Safari.

Any way to fix that? Apparently it's slightly cutting off the right hand side of the text.

[jscheuer1]

I cannot get on the server I use for testing Mac browsers at the moment, it is busy. However, this sounds rather simple, you never know until you try though. OK, style seems to me to be the best solution. Now, your existing styles for the scroller are a bit messed up because there is extra stuff in there for the other scroller that you are not using and some errors (ignored by the browsers, fortunately) as well as more selectors than are needed. Here is what you have:

<style type="text/css">

/*Example CSS for the two demo scrollers*/

#pscroller1{
width: 150px;
height: 220px;
padding: 5px;
background-color: #6B5E4E;
font:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
}

#pscroller2{
width: 350px;
height: 20px;
border: 1px lightyellow;
padding: 3px;
}

#pscroller2 a{
text-decoration: none;
}

.someclass{ 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	letter-spacing: normal;
	font-weight: normal;
		
	}


</style>

Here is what might work for this:

<style type="text/css">

/*CSS for the pscroller1*/

#pscroller1{
width: 150px;
height: 220px;
padding: 5px;
background-color: #6B5E4E;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}

#pscroller1 div {
width:140px!important;
}

</style>

This will effectively add an extra 10px 'margin' to the right of the content. This happens because the scrolling divisions will now be 10px less in width than the scroller container (140 vs 150). You might want to add to the #pscroller1 style's height to compensate or make both rules wider, say 160px and 150px to compensate for this changes effect on the vertical fit. Also, as I cannot test this at the moment, the difference between the two widths may need to be greater, say 15 or 20px.

There is always the chance that this strategy may not help the problem in Safari but, chances are it will.