| OLD | NEW | 
|---|
|  | 1 <!DOCTYPE html> | 
| 1 <style> | 2 <style> | 
| 2     div.columns { | 3     div.columns { | 
| 3         height: 50px; | 4         height: 50px; | 
| 4         width: 110px; | 5         width: 110px; | 
| 5         margin: 10px 0; | 6         margin: 10px 0; | 
| 6         padding: 10px; | 7         padding: 10px; | 
| 7         border: solid black; | 8         border: solid black; | 
| 8         font-family: Ahem; | 9         font-family: Ahem; | 
| 9         font-size: 25px; | 10         font-size: 25px; | 
| 10         color: lightblue; | 11         color: lightblue; | 
| 11         -webkit-columns: 2; | 12         -webkit-columns: 2; | 
| 12         -webkit-column-gap: 10px; | 13         -webkit-column-gap: 10px; | 
| 13         columns: 2; | 14         columns: 2; | 
| 14         column-gap: 10px; | 15         column-gap: 10px; | 
| 15         column-fill: auto; | 16         column-fill: auto; | 
|  | 17         display: inline-block; | 
|  | 18         vertical-align: bottom; | 
| 16     } | 19     } | 
| 17 | 20 | 
| 18     div.marker { | 21     div.marker { | 
| 19         position: absolute; | 22         position: absolute; | 
| 20         border: solid rgba(0, 0, 255, 0.5); | 23         border: solid dodgerblue; | 
| 21         -webkit-box-sizing: border-box; | 24         -webkit-box-sizing: border-box; | 
| 22     } | 25     } | 
| 23 | 26 | 
| 24     input[type="range"] { | 27     input[type="range"] { | 
| 25         -webkit-appearance: none; | 28         -webkit-appearance: none; | 
| 26         width: 25px; | 29         width: 25px; | 
| 27         height: 25px; | 30         height: 25px; | 
| 28         background-color: lightblue; | 31         background-color: lightblue; | 
|  | 32         margin: 0; | 
| 29     } | 33     } | 
| 30 | 34 | 
| 31     input[type="range"]::-webkit-slider-thumb { | 35     input[type="range"]::-webkit-slider-thumb { | 
| 32         -webkit-appearance: none; | 36         -webkit-appearance: none; | 
| 33     } | 37     } | 
| 34 </style> | 38 </style> | 
| 35 <p> | 39 <p> | 
| 36     The blue borders should coincide with light blue squares, like this: | 40     The blue borders should coincide with light blue squares, like this: | 
| 37     <span style="display: inline-block; background-color: lightblue; border: sol
     id rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>. | 41     <span style="display: inline-block; background-color: lightblue; border: sol
     id dodgerblue; width: 19px; height: 19px;"></span>. | 
| 38     There should be none of this: | 42     There should be none of this: | 
| 39     <span style="display: inline-block; background-color: lightblue; width: 25px
     ; height: 25px;"></span> | 43     <span style="display: inline-block; background-color: lightblue; width: 25px
     ; height: 25px;"></span> | 
| 40     or this: | 44     or this: | 
| 41     <span style="display: inline-block; border: solid rgba(0, 0, 255, 0.5); widt
     h: 19px; height: 19px;"></span>. | 45     <span style="display: inline-block; border: solid dodgerblue; width: 19px; h
     eight: 19px;"></span>. | 
| 42 </p> | 46 </p> | 
| 43 <div class="columns" id="t1"> | 47 <div class="columns" id="t1"> | 
| 44     <br>x y z | 48     <br>x y z | 
| 45 </div> | 49 </div> | 
| 46 | 50 | 
| 47 <div class="columns"> | 51 <div class="columns"> | 
| 48     <br><span id="t2">x y z</span> | 52     <br><span id="t2">x y z</span> | 
| 49 </div> | 53 </div> | 
| 50 | 54 | 
| 51 <div class="columns"> | 55 <div class="columns"> | 
| (...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 119     placeMarkersForRange(range); | 123     placeMarkersForRange(range); | 
| 120 | 124 | 
| 121     var image = document.getElementById("t6"); | 125     var image = document.getElementById("t6"); | 
| 122     range.selectNode(image); | 126     range.selectNode(image); | 
| 123     placeMarkersForRange(range); | 127     placeMarkersForRange(range); | 
| 124 | 128 | 
| 125     var div = document.getElementById("t7"); | 129     var div = document.getElementById("t7"); | 
| 126     range.selectNode(div); | 130     range.selectNode(div); | 
| 127     placeMarkersForRange(div); | 131     placeMarkersForRange(div); | 
| 128 </script> | 132 </script> | 
| OLD | NEW | 
|---|