Home Development Blog Chromicity and CSS
Chromicity and CSS PDF Print E-mail
User Rating: / 0
PoorBest 
Wednesday, 10 November 2010 23:58

After a friend of mine tried out the website on his google Android mobile phone and we ended up with all of the edit boxes in a very narrow but tall column, I realised that there was another major browser out there with problems...   Google's Chrome!

The main problem was with the Flow Panel - Chrome needed the properties "float: left;" where Firefox and IE used "display: inline;" to achieve the same thing.   I also ended up having to specify minimum widths with the property "min-width: 1.85em" and replace empty cells with " " and use the property "empty-cells: show".

Once I sorted all that out so that it worked in Chrome and still worked in Firefox/IE, I had learned an important lesson:   Do all this sort of stuff in CSS, not in your code.   It is much simpler when it comes to playing about with what different browsers need - your code can assign the style to your widgets and after that you only need to change your CSS file when trying things out.

I also took this opportunity to tidy up the behaviour of the solver tool when selecting a letter with the mouse - if you select a letter and then press another letter then the first letter is replaced.   I also implemented the backspace key sensibly.   I also added support for the cursor keys; left arrow and right arrow in the solver and also the up/down arrows in the submission tool.

Generally the net effect of the various keypress changes here is to make it far less necessary to use the mouse - also an issue when using a small screen such as on a mobile phone...

 
Copyright © 2018 Crypto League. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.