Question

I’m trying to style a simple countdown timer – but I’ve hit an issue that I don’t understand.

I’m getting space between two inline-divs (the ones with green borders) that I don’t want. Looking at the CSS in in Chrome’s “Inspect Element” I can’t see where it is coming from – nor can I get rid of it.

I notice that the green borders change on the first timer interval too – anyone know why this is and how I can stop it? How can I manage the space in between these 2 divs?

Ultimately I want something like the codecanyon timers but I don’t expect anyone to provide me with the full CSS for that, just help me understand the above issues.

I am using Google Chrome Version 23.0.1271.95m.

Code from the fiddle example:

Html.

<div id="timer1-wrapper">
    <div class="timer">
        <div class="timer-values-wrapper">
            <div class="timer-value-wrapper">
                <div class="minutes-value-1">
                    1
                </div>
                <div class="minutes-value-2">
                    4
                </div>
            </div>
            <span>minutes</span>
        </div>
        <div class="timer-values-wrapper">
            <div class="timer-value-wrapper">
                <div class="seconds-value-1">
                    5
                </div>
                <div class="seconds-value-2">
                    9
                </div>
            </div>
            <span>seconds</span>
        </div>
    </div>
</div>​

Javascript.

var minutes = 14;
var seconds = 59;

var secondsTimer = setInterval(function () {
    seconds--;
    if (seconds < 0) {
        if (minutes == 0) {
            clearInterval(secondsTimer);
            alert('Time is up');
            return false;
        }
        else {
            minutes -= 1;
           var minutesString = minutes < 10 ? '0' + minutes.toString() : minutes.toString();
           $('.minutes-value-1').text(minutesString.substr(0, 1));
           $('.minutes-value-2').text(minutesString.substr(1, 1));
           seconds = 59;
       }
    }
    var secondsString = seconds < 10 ? '0' + seconds.toString() : seconds.toString();
    $('.seconds-value-1').text(secondsString.substr(0, 1));
    $('.seconds-value-2').text(secondsString.substr(1, 1));
}, 1000);​

CSS.

.timer {
    border: 1px solid Red;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

.timer-values-wrapper {
    border: 1px solid Blue;
    font-size: 4em;
}

.timer-values-wrapper span {
    border: 1px solid Black;
    font-size: 0.5em;
}

.timer-value-wrapper {
    border: 1px solid Purple;
}

.timer-value-wrapper div {
    border: 1px solid Green;
    display: inline;
}​

Answer 1

When you have two inline elements whitespace in the markup is whitespace on the screen. If you change your markup to <div style="white-space: nowrap;" class="timer-value-wrapper"><div class="seconds-value-1">4</div><div class="seconds-value-2">3</div></div> with no whitespace in the markup then the space goes away. Your other option is to use floating divs or the likes.