Tags
android, apple, browser, chrome, css, dom, firefox, hacks, htc, html, html5, ie10, ie8, ie9, javascript, linux, mac, mozilla, msie, opera, smart phone, tablet, windows
Anyone who has ever done any web-page development by themselves will probably have spent some time swearing at Microsoft’s Internet Explorer. If they haven’t, then they developed on that browser, and then swore at the others.
Problems are spread across HTML, Javascript and CSS. The neatest, most convenient way to resolve this problem varies according to the task, time and skill of those involved; there is not one single best solution. However, due to some very irritating problems with line heights and fixed width font sizes, I discovered a new (to me) method for tacking CSS issues. That is what I will share with you now.
I wanted to create a page with live cricket scores which closely resembled old-school analogue TV “teletext” (or ceefax) used in the UK. Fear not, this blog isn’t about cricket, it is about fixed-width fonts and browser issues. Now, to understand my problems, please take 5 seconds to observe my page: http://www.birdfolk.co.uk/cricalltv.php
The problem was that I wanted to fill, as completely as possible, the “TV screens” with text. Now each o/s, and each browser, can have different fixed-width fonts and the way they render them doesn’t appear to be as consistent as with other fonts. The default CSS style I use has this font information:
#CONTAIN { font: bold 14px/0.85em "Courier",
"Lucida Console", "DejaVu Sans Mono", "Monaco"; }
It displays perfectly in Firefox, but is a bit too big in Chrome, IE is WAY too large, as it is on my Android phone (HTC Desire). In Javascript we can perform nice simple tests in the “navigator.appVersion” property. I used the following code to make the font a little bigger for Chrome:
if(navigator.appVersion.indexOf('Chrome')>=0)
document.styleSheets[0].insertRule("#CONTAIN { line-height:0.9em; }", 0);
For M$’s Internet Explorer, I needed to add three rules, the “addRule” command is different, but that doesn’t matter because we’ve already done a check for IE:
if(navigator.appVersion.indexOf('MSIE')>=0)
{
document.styleSheets[0].addRule("#CONTAIN", "font-size: 13px;");
document.styleSheets[0].addRule("#CONTAIN", "line-height:0.95em;");
document.styleSheets[0].addRule(".TopPad", "padding-top: 4px;");
}
I can even ensure that is works nicely on my phone:
if(navigator.appVersion.indexOf('HTC Desire')>=0)
document.styleSheets[0].insertRule("#CONTAIN { font-size: 13px; }", 0);
And this was a guess in case other Android devices are be similar:
else if(navigator.appVersion.indexOf('Android')>=0)
document.styleSheets[0].insertRule("#CONTAIN { font-size: 13px; }", 0);
So people, please use this code if it suits your needs and feel free to leave any version feedback or compatibility issues below. Thanks for your time.
