CSS display:inline prevents element from refreshing

emponapam

New Member
I have a clock in my projet inserted in a div and it's really important to me that it is rendered "inline". Indeed, the AM/PM cell is right next to it and I'd like it to move as clock gets shorter (ie. 11:11 instead of 22:22).So i set its property to display: inline; like this :\[code\].time{ display: inline; position: relative; cursor: pointer; z-index: 1; font-size: 50pt; }\[/code\]The same goes for the am/pm element :\[code\].ampm{ display: inline; cursor: pointer; position: relative; z-index: 1; font-size: 18pt; top: -40px;}\[/code\]This is the HTML file :\[code\]<div class="timeDate"> <div class="hour"><div id="time" class="time"></div><div id="ampm" class="ampm"></div></div> <div id="date" class="date"></div></div>\[/code\]and at least, the Javascript piece of code that keeps update it:\[code\]setInterval('checkTime()', 1000);function checkTime(){ currentTime = new Date(); _minutes = currentTime.getMinutes(); _hours = currentTime.getHours(); _day = currentTime.getDay(); _date = currentTime.getDate(); _month = currentTime.getMonth(); time.innerHTML = _hours + ":" + _minutes; ampm.innerHTML = ampmValue;}\[/code\]It works fine with display: block;Plus, when i add seconds I can see it updates, but only like, 2 times out of 10.Do you have an idea of why, and how could I fix that ?Thanks in advance !Here is a link to my project (Chrome ONLY) : http://acemond.free.fr/FEZAcetheme/BETA/FEZ_Lockscreen_1.2-3.theme/LockBackground.htmlIt's meant to work locally so load the page entierly, then reload (you'll keep cache)
 
Back
Top