Positioning of an image relative to a div within a div

Question

I'm trying to create a page that displays the time. The ':' of the font i'm using is ugly so i want to replace it with an image. However when the time goes from example from 9:59 to 10:00 there are spacing issues. Here is some of my code:

.image{
    position: absolute;
    width:30px; height:90px; 
    background-image: url("2dots.png");
    background-repeat: no-repeat;
    background-size:50%;margin-top:30px;
    left:50%;
    margin-left:-49px;
    z-index:-1;
}
#time { 
    font-size: 99px; 
    width:300px;
    left:50%; 
    margin-top:0px;
    margin-left:-40px;
}
<div id="time"><div class="image"></div></div>
function updateClock() //updates time ever second inside #time every second

Answer 1

You really don't want to juggle with the positioning like that.

You should just set the .image to display: inline-block , then place it in between the hours and minutes:

.image{
    width:30px;
    height:90px; 
    background-image: url("2dots.png");
    background-repeat: no-repeat;
    background-size:50%;
}

<div id="time">
    <span id="hours">12</span>
    <div class="image"></div>
    <span id="minutes">30</span>
</div>

Then, just set the current time's hours / minutes in the proper spans.
Of course, you can just add seconds after it, if you need.

However, a different option would be to use a <span> that displays a different font, just for the colon:

 span{ font-family: Arial; } .colon{ font-family: Tahoma; } 

 <div id="time"> <span id="hours">12</span><span class="colon">:</span><span id="minutes">30</span> </div> (Normal colon : ) 

Or, from @Paulie_D 's suggestion :

 span{ font-family: Arial; } #hours:after{ content: ':'; font-family: Tahoma; } 

 <div id="time"> <span id="hours">12</span><span id="minutes">30</span> </div> (Normal colon : )