how to fix styling of this script

how to fix styling of this script
the script is working at English 100% but after i changed the forum language to Arabic to see how is the progress i was shucked by see the members names over the topic titles and the post count etc
here is image to Explain

what in the Script that might control the align of names etc
is it on the CSS or the templates it self
thanks again
as you see names on topics titles - views on the titles too etc
they should be spared each part by its own place
the whole codes to look at them because i failed to do it my self
all the rest are templates
in  Overall_header  find this code and delete
here is every code in the tutorial
original link
http://socialacademy.forums.fm/t441-tutorial-latest-topic-system-v5#
SocialAcademy        
   

Code:



    <div id="{ID_LEFT}">
            <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
            <!-- BEGIN saut -->
            <div style="height:{SPACE_ROW}px"></div>
            <!-- END saut -->
            <!-- END giefmod_index1 -->
    </div>


save & publish

next go to Index_body and find this code

{CHATBOX_TOP}



below the line add this

SocialAcademy        
   

Code:



    <div id="{ID_LEFT}" class="main">
       <div class="main-head">
          <div class="page-title">
             <h2>Latest Topic System v5</h2>
          </div>
       </div>
         <div class="main-content">
          <table cellspacing="0" class="table">
             <tbody class="statused">
                <!-- BEGIN giefmod_index1 -->
                {giefmod_index1.MODVAR}
                <!-- END giefmod_index1 -->
             </tbody>
          </table>
       </div>
       <script type="text/javascript">
          //<![CDATA[
          var versionMinor = parseFloat(navigator.appVersion),
             versionMajor = parseInt(versionMinor),
             IE = document.all && !window.opera && 7 > versionMajor,
             IE7 = document.all && !window.opera && 7 <= versionMajor,
             OP = window.opera,
             FF = document.getElementById,
             NS = document.layers;
    
          function get_item(a, c) {
             if (IE) return c ? window.opener.document.all[a] : document.all[a];
             if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
             if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
          }
    
          var current_tooltip;
    
          function show_tooltip(a, c) {
             var b = get_item("tooltip");
             b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
             b.style.zIndex = 1000;
             b.style.position = "absolute";
             b.innerHTML = "<p>" + c + "</p>";
             b.style.visibility = "visible";
             a.onmousemove = move_tooltip;
             a.onmouseout = function() {
                b.style.visibility = "hidden"
             };
             a.title = ""
          }
          var offsetxpoint = -60,
             offsetypoint = 20,
             real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
             real_body = document.documentElement ? document.documentElement : document.body;
    
          function move_tooltip(a) {
             var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
                d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
                b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
                e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
                f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
             current_tooltip = get_item("tooltip");
             current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
             current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
          }
          $("#recent_topics li a:first-child").mouseover(function() {
             show_tooltip(this, $(this).next().html())
          });
          $("#active_topics a, #viewed_topics a").mouseover(function() {
             show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));
          }).after(function() {
             return '<span class="lastRight">' + this.title.replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'
          });
          $(".changeLast").change(function() {
             $(".half.group_" + $(this).data("group")).hide();
             $("#" + this.value).show();
          });
           //]]>
       </script>
    </div>
    </div>


next go to your

Administration Panel → Display → Portal  

then  paste this code in mod_recent_topic

SocialAcademy        

Code:

    

    <!-- BEGIN classical_row -->
    <tr>
       <th class="double">
          <h2>Newest post
             <span class="right">Latest reply</span>
          </h2>
       </th>
       <th>
          <select class="changeLast" data-group="post">
             <option value="top_posters">Top Poster</option>
             <option value="active_starters">Most Topic Users</option>
          </select>
       </th>
       <th>
          <select class="changeLast" data-group="time">
             <option value="users_week">Most Active Poster of Week</option>
             <option value="users_month">Most Active Poster this Month</option>
          </select>
       </th>
    </tr>
      <td class="double" rowspan="3">
          <ul id="recent_topics">
             <!-- BEGIN recent_topic_row -->
             <li>
                <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
                <div class="tooltip_data" style="display:none">
                   <p>
                      <span style="color:red">Subject</span>: {classical_row.recent_topic_row.L_TITLE}
                   </p>
                   <p>
                      <span style="color:blue">Posted</span>: {classical_row.recent_topic_row.S_POSTTIME}
                   </p>
                </div>

                <!-- BEGIN switch_poster -->
                <a class="lastRight" href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
                <!-- END switch_poster -->
                <!-- BEGIN switch_poster_guest -->
                <span class="lastRight">
                   {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                </span>
                <!-- END switch_poster_guest -->
             </li>
             <!-- END recent_topic_row -->
          </ul>
       </td>
    <!-- </tr> -->
    <!-- END classical_row -->


mod_most_active_topics

SocialAcademy        
   

Code:


    <tr>
       <th class="topicLast">
          <h2>Most discussed topics</h2>
       </th>
       <th class="topicLast">
          <h2>Most viewed topics</h2>
       </th>
    </tr>
    <tr>
       <td>
          <ul id="active_topics" class="half">
             <!-- BEGIN TOPIC -->
             <li>
                <span style="display:none">{TOPIC.TITLE}</span>
                <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
             </li>
             <!-- END TOPIC -->
          </ul>
       </td>
    <!--</tr>-->


mod_most_viewed_topics

SocialAcademy        
   

Code:


    <!--<tr>-->
       <td>
          <ul id="viewed_topics" class="half">
             <!-- BEGIN TOPIC -->
             <li>
                <span style="display:none">{TOPIC.TITLE}</span>
                <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
             </li>
             <!-- END TOPIC -->
          </ul>
       </td>
    </tr>

mod_most_active_starters

SocialAcademy        
   

Code:

 

    <!--<td>-->  
       <ul id="active_starters" class="half group_post">
          <!-- BEGIN POSTER -->
          <li>
             {POSTER.NAME}
             <span class="lastRight">
                {POSTER.NB_TOPICS}
             </span>
          </li>
          <!-- END POSTER -->
       </ul>
    </td>



mod_top_post_users_month

SocialAcademy        
   

Code:


    <!--<tr>-->
       <!--<td>-->  
          <ul id="users_month" class="half group_time">
             <!-- BEGIN POSTER -->
             <li>
                {POSTER.NAME}
                <span class="lastRight">
                   {POSTER.NB_POSTS}
                </span>
             </li>
             <!-- END POSTER -->
          </ul>
       </td>
    </tr>

mod_top_post_users_week

SocialAcademy        
   

Code:


    <td>
       <ul id="users_week" class="half group_time">
          <!-- BEGIN POSTER -->
          <li>
             {POSTER.NAME}
             <span class="lastRight">
                {POSTER.NB_POSTS}
             </span>
          </li>
          <!-- END POSTER -->
       </ul>
    <!--</td>-->


mod_top_posters

SocialAcademy        

Code:

    

    <td>
       <ul id="top_posters" class="half group_post">
          <!-- BEGIN POSTER -->
          <li>
             {POSTER.NAME}
             <span class="lastRight">
                {POSTER.NB_POSTS}
             </span>
          </li>
          <!-- END POSTER -->
       </ul>
    <!--</td>-->

up
  
any one know a way ?