Apologies if this is in the wrong forum, just not sure where it should be !
I have a Counter on my site which displays the number of items in a database and then changes depending on various Selects and filters, it works well but doesn’t look very nice !
I would like to style the numbers to look a little bit like a Hit Counter … I believe this would require individual character styling to set a css background, border etc around each individual character something like this would be great !!
<span id="counter" class="counter-box">
<em class="number">3</em>
<em class="number">6</em>
<em class="number">7</em>
<em class="comma">,</em>
<em class="number">2</em>
<em class="number">7</em>
<em class="number">6</em>
</span>
css
em {
font-weight: bold;
font-style: normal;
font-size: 1.2em;
display: inline;
border: 1px solid black;
color: #fff;
margin-left: -1px;
border-radius: 2px;
background-color: #444;
background-image: -moz-linear-gradient(top, #888 0%, #000 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(100%,#000));
padding: 0 4px 0 5px;
}
That is the effect that i want to achieve, but unfortunately as my number is dynamically generated with the following
<fieldset>
<div class="stock"><span id='dynamicStockCount'></span> Vehicles in stock</div>
<span id='originalCount' style='display:none'><?php echo $resultCount;?></span>
</fieldset>
to show
<span id="originalCount" style="display:none">98</span>So does anybody have any great ideas to achieve what i want ?
Thanks for any suggestions !