Print preview not working fine

HTML & CSS
1

On print preview nothing is coming but without print preview expected data is coming. How to see same data on print preview

<div style="background-color:rgba(0%,0%,0%,1);left:0.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:6.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:12.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:18.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:24.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:30.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:36.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:42.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:48.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:54.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:60.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:66.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:72.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:78.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:84.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:90.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:96.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:102.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:108.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:114.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:120.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:126.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:132.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:138.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:144.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:150.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:156.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:162.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:168.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:174.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:180.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:186.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:192.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:198.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:204.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:210.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:216.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:222.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:228.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:234.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:240.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:246.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:252.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:258.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:264.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:270.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:276.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:282.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:288.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:294.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:300.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:306.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:312.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:318.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:324.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:330.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:336.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:342.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:348.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:354.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:360.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:366.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:372.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:378.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:384.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:0.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:6.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:12.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:18.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:24.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:30.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:36.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:42.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:48.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:54.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:60.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:66.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:72.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:78.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:84.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:90.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:96.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:102.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:108.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:114.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:120.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:126.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:132.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:138.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:144.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:150.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:156.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:162.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:168.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:174.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:180.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:186.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:192.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:198.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:204.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:210.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:216.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:222.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:228.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:234.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:240.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:246.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:252.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:258.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:264.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:270.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:276.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:282.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:288.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:294.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:300.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:306.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:312.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:318.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:324.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:330.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:336.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:342.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:348.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:354.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:360.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:366.000000px;top:8.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:372.000000px;top:0.000000px;width:3.000000px;height:24.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:378.000000px;top:0.000000px;width:3.000000px;height:16.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
<div style="background-color:rgba(0%,0%,0%,1);left:384.000000px;top:8.000000px;width:3.000000px;height:8.000000px;position:absolute;border:none;padding:0;margin:0;">&nbsp;</div>
2

Hi,
Since all the code produces is a background color, you will need to select the option to print bg colors.

In Firefox it is…

Page Setup > Format & Options > Print Background (Colors & Images)

As far as the code, all those inline styles should be moved to a css file.
You can set up some classes for divs that share the same styles.

Instead of absolute positioning, it could be done with floats or inline-blocks.
Using vertical-align along with inline-blocks might work.

3

Thank you very much

4

Instead of absolute positioning, it could be done with floats or inline-blocks.
Using vertical-align along with inline-blocks might work. can you give little example?

5

Yes, I can make an example.

Is this something to simulate a bar code ?

6

It is for simulating Intelligent mail barcode for usps . it would great if I would get the font

1 Like
7

Give me a few minutes and I will work up an example.

8

Okay, using inline-blocks and vertical-align with a few classes will produce this

By using inline-blocks you can just let the divs line up beside each other and eliminate the positioned coordinates.

Here is the sample code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bar Code</title>
<style>

.bar {
   display:inline-table; /*for webkit*/
   word-spacing: -.5em;
}
.bar div {
   display:inline-block;
   word-spacing: normal;
   width:3px;
   margin:0 3px 0 0;
   background-color:rgba(0%,0%,0%,1)
}
.top {vertical-align:top}
.mid {vertical-align:middle}
.bot {vertical-align:bottom}

.sml {height:8px}
.med {height:16px}
.lrg {height:24px}

</style>

</head>
<body>
<div class="bar">
   <div class="sml mid"></div>
   <div class="sml mid"></div>
   <div class="sml mid"></div>
   <div class="lrg mid"></div>
   <div class="med top"></div>
   <div class="sml mid"></div>
   <div class="med bot"></div>
   <div class="med bot"></div>
   <div class="med bot"></div>
   <div class="sml mid"></div>
   <div class="lrg mid"></div>
   <div class="med top"></div>
   <div class="sml mid"></div>
   <div class="lrg mid"></div>
   <div class="med bot"></div>
   <div class="sml mid"></div>
   <div class="med bot"></div>
   <div class="sml mid"></div>
   <div class="med top"></div>
   <div class="sml mid"></div>
   <div class="sml mid"></div>
   <div class="sml mid"></div>
   <div class="lrg mid"></div>
   <div class="lrg mid"></div>
   <div class="sml mid"></div>
   <div class="sml mid"></div>
   <div class="sml mid"></div>
   <div class="med top"></div>
   <div class="sml mid"></div>
   <div class="lrg mid"></div>
   <div class="lrg mid"></div>
</div>

</body>
</html>

If you had a font that could take the place of those divs it would be the best way to go :slight_smile:

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.