Results 1 to 7 of 7

Thread: Scoller text wrap

  1. #1
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Scoller text wrap

    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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Any help would be appreciated!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    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:

    Code:
        <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).
    Last edited by jscheuer1; 07-26-2006 at 05:08 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    All working now.

    Thanks so much!

  6. #6
    Join Date
    Jul 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •