I have designed a four-digit counter that needs to be displayed in the bottom right corner of the page. Each digit is represented by a block image as a background. It is functioning properly in Chrome, but there are compatibility issues with IE7+ and Firefox.
HTML (I have provided code for only one digit, but there are four in total):
<div id="container_bottom">
<div id="counters" <div id="counter_txt">Text:</div>
<div class="div_counter1">
<div class="div_counter2">
<img class="img-counter" src="counter_bg.png" />
</div>
<div class="div_counter3">
<span class="counter"><?php echo $counter[1]; ?></span>
</div>
</div>
</div>
CSS:
#container_bottom {
width: 100%;
min-width: 800px;
display: inline-block;
position: absolute;
margin-top: 150px;
_width: 800px;
}
#counters {
float: right;
margin-right: 5px;
}
.div_counter1 {
display: inline-block;
}
.div_counter2 {
display: inline-block;
}
.div_counter3 {
display: inline-block;
position: absolute;
margin-left: 8px;
top: 0px;
}
.counter {
font-size: 36px;
color: #ffffff;
}
#counter_txt {
font: 16px Segoe Print;
color: #0c3348;
display: inline-block;
position: absolute;
right: 180px;
top: 10px;
}