CSS alignment cross browser - css

Question

I've created a counter with 4 digits, which need to be displayed in the bottom right corner of the page. Each digit has a block-image as 'background'.
It works in chrome, but not in IE7+ and FF..
HTML (I writed down only 1 digit, but there are 4):
<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;
}

Answer 1

It looks like you might have overcomplicated what you are trying to do seems to be something like this
HTML
<div id="container_bottom">
<span class="counter_text">Text here:</span>
<span class="counter_holder">0</span>
<span class="counter_holder">0</span>
<span class="counter_holder">0</span>
<span class="counter_holder">6</span>
</div>
CSS
#container_bottom{
position:absolute;
bottom:20px;
right:20px;
}
#container_bottom .counter_holder{
display:inline-block;
background-color:green;
width:30px;
height:35px;
text-align:center;
font-size:30px;
border:1px solid black;
-moz-border-radius: 5px;
border-radius: 5px;
/* background-image: url(''); // add image here if needed*/
}
#container_bottom .counter_text{
/* add css here if needed */
}
jsFiddle Here