• About Quite Cross

Quite Cross

~ about quite a lot.

Quite Cross

Tag Archives: smart phone

CSS Browser Hacks – A Different Way

24 Friday Aug 2012

Posted by grunthosbird in Code, Moaning

≈ Leave a comment

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.

Recent Posts

  • World Fat XI from 2010
  • Commodore Vic 20 Top 10 – Sort Of
  • DRAB – Difference from a Run-A-Ball
  • Ceefax Report – England vs Sri Lanka – Test 1 – 2016
  • Pathetic Points System

Archives

  • June 2019
  • July 2017
  • June 2017
  • May 2016
  • April 2016
  • July 2015
  • April 2015
  • December 2014
  • November 2014
  • October 2014
  • July 2014
  • June 2014
  • December 2013
  • September 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012

Categories

  • Code
  • Cricket
  • Games
  • Moaning
  • Movies
  • Retro
  • Snooker and Pool
  • Tennis

Meta

  • Register
  • Log in
  • Entries feed
  • Comments feed
  • WordPress.com

Create a free website or blog at WordPress.com.

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy