CSS Ruler problem positioning multiple <div> containers

This is a CSS issue as another guy was wanting me to build a dynamic ruler that he can add peoples scores to the array and have them move up & down the ruler. Well When you see this code in action youll see that it does what he wants BUT when we get to scores round to the same number to display on it is putting them on top of each other. See what you guys think will straighten it out. We can just display them to the right of each other. Thanks

<?php
      @session_start();
      $scores = array(array('name'  => 'bob',      
                                      'score' => '58.0'
                                     ),
                              array('name'  => 'jill',
                                      'score' => '52.3'
                                     ),
                              array('name'  => 'jack',
                                      'score' => '48.1'
                                     ),
                              array('name'  => 'tom',
                                      'score' => '44.2'
                                     ),
                              array('name'  => 'mary',
                                      'score' => '35.9'
                                     ),
                              array('name'  => 'rick',
                                      'score' => '35.5'
                                      ),
                              array('name'  => 'don',
                                      'score' => '27.8'
                                      ),
                              array('name'  => 'moe',
                                      'score' => '23.3'
                                      )
                          );
      $high_score = (int) 0;
      $i = count($scores);
      $j = 0;
      for($k = 0; $k < $i; $k++) {
            if($scores[$j]['score'] > $high_score) {
                  $high_score = (int) $scores[$j]['score'];
            }
            $j++;
      }
      $rulerTop = substr($high_score, 0, 1);
      $rulerTop++;
      $rulerTop .='0';
      echo('<table>');
      for($l = $rulerTop; $l >= 20; $l--) {
            echo('<tr>');

                  if(substr($l, 1, 2) == '0') {
                        echo('<td style="border-right: thin solid blue"><b>'."$l".'</b>&nbsp;</td>');
                  } else {
                        if($l & 1) {
                              echo('<td valign="middle" style="text-align:right; border-right: thin solid blue"></td>');
                        } else {
                              echo('<td valign="middle" style="text-align:right; border-right: thin solid blue">--</td>');
                        }
                  }

            $n = '';
            for($m = 0; $m < $i; $m++) {
                  if(round($scores[$m]['score']) == $l) {
                        $n .= '<td style="padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;"><div id="'."$m".'outer" name="'."$m".'outer" style="position: relative; z-index: '."$m".';"><div id="'."$m".'inner" name="'."$m".'inner" style="position: absolute; bottom: -10px; z-index: '."$m".';">&nbsp;';
                        $n .= $scores[$m]['score'];
                        $n .= '&nbsp;';
                        $n .= ucwords($scores[$m]['name']);
                        $n .= '</div></div</td>';
                  }
            }
            echo("$n");
            echo('</tr>');
      }
      echo('</table>');
?>

You can see close to the bottom here where I have all the css trying to control the output form. He said it looked fine in firefox as Im using Safari and that he had a slight adjustment for IE so ill just use the PHP commands to check the browser and adjust the offset.
LVL 7
gemdeals395Asked:
Who is Participating?
 
SyntheticsCommented:
You'll have to work out in the php if two scores are going to graphically overlap and adjust before sending the html. Good luck...
0
 
gemdeals395Author Commented:
It was worked out in the thml, thanks
0
 
SyntheticsCommented:
lol, 2000 points for one non-committal sentence isn't bad eh?

Thanks gemdeals
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.