The div elements on the left side appear to be aligned with the alternating colors in the background image on the right.
But when the browser's zoom is changed, the background image is re-sized in a different proportion than the div elements.
Html:
<div class=dhx_scale_holder style="background-image: none; width: 65px;">
<div class="dhx_scale_hour">12:00 AM</div>
<div class="dhx_scale_hour">1:00 AM</div>
<div class="dhx_scale_hour">2:00 AM</div>
</div>
<div class="dhx_scale_holder " style="left: 75px;"></div>
CSS:
.dhx_scale_holder {
position: absolute;
top: 0px;
width: 74px;
background-image: url("http://i40.tinypic.com/dpwvfk.png");
background-repeat: repeat;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #586a7e;
height: 1440px;
}
.dhx_scale_hour {
text-align: center;
font-size: 10px;
line-height: 40px;
border-bottom-width: 1px;
border-bottom-style: dotted;
background-color: rgb(194, 213, 252);
height: 59px;
width: 65px;
}
JSFiddle:
(You will have to play with the zoom of your browser to reproduce it)
All the browsers I have tested seems to do the same, with different proportions between the background image and elements though.
Is there anyway to fix this, with minimal changes to the layout (it is generated by a schedule tool), ideally only with css? Javascript would be ok too.
Could you confirm that images do not necessarily scale to the same size than others elements and so this is the expected behavior?