Question

I created this countdown (code here), and for some reason the numbers seem to be going downwards in Safari, instead of left to right.

The spans are not too wide or anything, (width: 150px;) so i dont know why this is happening.

Does anyone know what is causing this or how to fix it?

I’ve tested it in Chrome and Firefox, and it works fine, but i dont know about IE.

Answer 1

Just remove display: table; from .nums and display: table-cell; from .nums span

Demo

CSS

@font-face {
    font-family: 'Quicksand Book';
    src: url('http://donutdev.com/fonts/Quicksand_Book.otf');
}

#headr {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 50px;
}

#countdown {
    width: 600px;
    height: 166px;
    background-color: #212121;
    border-radius: 7px;
    display: none;
}

.nums {
    float: left;
    width: 150px;
    padding-top: 20px;
    height: 90px;
    text-align: center;
    font-family: 'Quicksand Book', sans-serif;
    font-size: 50px;
}

.nums span {
    vertical-align: middle;
    color: #dcdcdc;
}

.text {
    float: left;
    width: 150px;
    padding-bottom: 20px;
    text-align: center;
    font-family: 'Verdana', sans-serif;
    font-size: 25px;
    color: #dcdcdc;
}