CSS Text-Transform: Capitalize Weirdness

Question

I have a page that shows a javascript countdown . Javascript automatically fills in "d" for several days, "h" for several 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 days, 5 hours, etc.), but Internet Explorer caps (3 days (S), 5 hours (S), etc ...). Safari and Chrome are even worse because they use the letters and first letter of CSS content (3 DAy (S), 5 HOur (S), etc.).

I found a page that displays typography errors: the first letter and the first line , which may be somewhat related.

I tried to do text-transform:lowercase and then text-transform:capitalize , but that did not change the results.

Any ideas on how to fix this? I will probably just knock out the capital letters, but then I have to make sure that everything is typed in the correct shell.

Jj

Answer 1

Okay, so from what I can say, you just need the first letter of days, hours and minutes. You can do it in javascript. Sort of

 var daysString = days + " d"; document.getElementById("daysBox").innerHTML = daysString.toUpperCase(); 

Update: forgot to mention our #countdown {text-transform: capitalize;}