Good comment because firstly yes, it was wrong. And more importantly, he exposed an excellent flaw in my development process. Java is famously a language which is write once, run everywhere. With web technologies it's more like write once, test everywhere, swear a lot, and recode in several.
HTML 5 technologies in general and CSS specifically behave differently in different browsers, different operating systems, and (if you're using them) different devices. So if you want your code to run everywhere, ideally you should test every possible environment that you want to support. As a starter, you should cover the "big 4" browsers: chrome, firefox, safari, and IE. Preferably in multiple versions [1] and on different operating systems.
In a nutshell, good catch[2]: almost certainly nxskok was using a different browser from me, and so found the different behaviour.
Increasing the width will work, but is just one potential solution. If you're thinking of mobile devices, you might find that the whole frame is too big to fit in a phone screen and so a better approach is to reduce the font size and make all the items smaller.
Here's a screen capture showing these updates, and I've also changed from pixel width to %. I used the built-in debugging tool that comes with Google Chrome, which is my preferred debugger for HTML 5 and demonstrates how powerful the on-the-fly change functions are.
To launch the debugger, from Chrome click the right-hand customize and control menu, then Tools -> Developer tools. Click the Elements tab to see the HTML and CSS side by side.
[1] IE 7, 8 and 9 are notoriously different from each other. If IE 6 is on your list, you might want to review the IE6 Security problems
[2] In my defence, I did spot the problem and increase the width in Dojo part 2, but I failed to retrofit the fix into part 1, so I'll take the rap
No comments:
Post a Comment