--- a/src/css/LdtPlayer.css	Mon Dec 19 15:25:48 2011 +0100
+++ b/src/css/LdtPlayer.css	Mon Dec 19 16:04:14 2011 +0100
@@ -18,7 +18,7 @@
    }
 
     .Ldt-SegmentsWidget {
-      overflow: auto; /* clear the floats */
+     /* overflow: auto; /* clear the floats */
       margin-top: 1px;
     }
 
@@ -28,6 +28,13 @@
       border-right: 1px solid white;
     }
 
+    .Ldt-SegmentPositionMarker {
+      position: absolute;
+      z-index: 100;
+      width: 1px;
+      height: 10px;
+      background-color: white;
+    }
     .tooltip {
       display:none;
       background:transparent url(imgs/white_arrow_mini.png);
@@ -358,14 +365,6 @@
       border-right: 1px solid white;
     }
 
-    .positionMarker {
-      position: absolute;
-      z-index: 100;
-      width: 1px;
-      height: 20px;
-      background-color: white;
-    }
-
     /* tweet Widget */
     .Ldt-tweetWidget {
       font-size: 12px;

--- a/src/js/widgets/segmentsWidget.js	Mon Dec 19 15:25:48 2011 +0100
+++ b/src/js/widgets/segmentsWidget.js	Mon Dec 19 16:04:14 2011 +0100
@@ -58,15 +58,14 @@
     var end = Math.round((+ annotation.end) / 1000);
     var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
     var id = annotation.id;
-    var startPourcent 	= IriSP.timeToPourcent(begin, duration) + onePxPercent;
+    var startPourcent 	= IriSP.timeToPourcent(begin, duration);
     
-    /* some sort of collapsing occurs, so we only have to substract one pixel to each box instead of
-       two
+    /* surprisingly, the following code doesn't work on webkit - for some reason, most of the 
+       boxes are 3 pixels smaller.
     */
-    var endPourcent 	= IriSP.timeToPourcent(end, duration) - startPourcent - onePxPercent * 1.5;
-    
-    /* on the other hand, we have to substract one pixel from the first box because it's the only
-       one to have to effective 1px margins */
+    var endPourcent 	= Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent);
+    var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)) - 2;
+        
     if (i == 0) {
 
       endPourcent -= onePxPercent;
@@ -88,10 +87,9 @@
     
     var annotationTemplate = Mustache.to_html(IriSP.annotation_template,
         {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent,
-        "endPourcent" : endPourcent, "hexa_color" : hexa_color,
+        "endPixel" : endPixel, "hexa_color" : hexa_color,
         "seekPlace" : Math.round(begin/1000)});
 
-
     this.selector.append(annotationTemplate);
 
 //    IriSP.jQuery("#" + id).tooltip({ effect: 'slide'});
@@ -176,6 +174,7 @@
 IriSP.SegmentsWidget.prototype.positionUpdater = function() {  
   var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000;
   var time = this._Popcorn.currentTime();
+  //var position 	= ((time / duration) * 100).toFixed(2);
   var position 	= ((time / duration) * 100).toFixed(2);
 
   this.positionMarker.css("left", position + "%");  

--- a/src/templates/annotation.html	Mon Dec 19 15:25:48 2011 +0100
+++ b/src/templates/annotation.html	Mon Dec 19 16:04:14 2011 +0100
@@ -2,7 +2,7 @@
 <div title='{{divTitle}}' id='{{id}}'
 	class='Ldt-iri-chapter' 
 	style='left: {{startPourcent}}%; 
-         width: {{endPourcent}}%; 
+         width: {{endPixel}}px; 
          background-color:#{{hexa_color}};' 
 	>
 </div>

--- a/src/templates/overlay_marker.html	Mon Dec 19 15:25:48 2011 +0100
+++ b/src/templates/overlay_marker.html	Mon Dec 19 16:04:14 2011 +0100
@@ -1,3 +1,3 @@
-{{! the template for the small white bars which is z-indexed over our segment widget }}
-<div class='positionMarker' style='background-color: #F7268E;'>
+{{! the template for the small bars which is z-indexed over our segment widget }}
+<div class='Ldt-SegmentPositionMarker' style='background-color: #F7268E;'>
 </div>
\ No newline at end of file