CSS Text-Transform:Capitalize Oddity - css

Question

I have a page that shows a javascript countdown. The javascript automatically populates "d" for days, "h" for hours, etc... CSS adds "ay(s)", "our(s)", etc..., as space allows, and capitalizes them.
Javascript:
function cdtd(broadcast) {
var nextbroadcast = new Date(broadcast);
var now = new Date();
var timeDiff = nextbroadcast.getTime() - now.getTime();
if (timeDiff <= 0) {
clearTimeout(timer);
document.getElementById("countdown").innerHTML = "<a href=\"flconlineservices.php\">Internet broadcast in progress<\/a>";
/* Run any code needed for countdown completion here */
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;
document.getElementById("daysBox").innerHTML = days + " d";
document.getElementById("hoursBox").innerHTML = hours + " h";
document.getElementById("minsBox").innerHTML = minutes + " m";
// seconds isn't in our html code (javascript error if this isn't commented out)
/*document.getElementById("secsBox").innerHTML = seconds + " s";*/
var timer = setTimeout('cdtd(broadcast)',1000);
}
CSS:
[role="navigation"] {text-transform:capitalize;}
#media screen and (min-width:1600px) {
#countdown #daysBox:after {content:"ay(s)";}
#countdown #hoursBox:after {content:"our(s)";}
#countdown #minsBox:after {content:"inute(s)";}
}
Firefox and Opera display the countdown as I expected (3 Day(s), 5 Hour(s), etc...), but Internet Explorer capitalizes the (s) (3 Day(S), 5 Hour(S), etc...). Safari and Chrome are even worse, as they capitalize the (s) and the first letter of the CSS generated content (3 DAy(S), 5 HOur(S), etc...).
I found a page that shows typography bugs with :first-letter and :first-line that may be somewhat related.
I tried doing text-transform:lowercase and then text-transform:capitalize, but that didn't change the results.
Any ideas on how to fix this? I'll probably just knock out the capitalization, but then I have to make sure everything is typed in the correct casing.
JJ

Answer 1

Ok so from what I can tell you just need the first letter of days, hours and minutes caps. You can do this in javascript. Something like
var daysString = days + " d";
document.getElementById("daysBox").innerHTML = daysString.toUpperCase();
Update: forgot to mention take our #countdown {text-transform:capitalize;}