If you think it is easy teaching HTML, CSS and related web technologies… Let’s see how long it takes you to figure out these puzzlers. I plan to provide one periodically. Keep in mind these are real problems that students encounter as they code their pages. Obviously, you need to view the source code.
For our March, 2014 puzzler, I provide a small page created with HTML and CSS. Nothing spectacular here. In fact, in addition to the link to the problem child page, I provide a series of screen captures below (which should give you some clues as to the problem). Yes, there is only one problem. I took the student’s code and modified it a bit to protect the guilty.
Does the page validate? Of course. Here is a screen capture (taken on March 3, 2014) to prove it.
Let’s see how the page looks in various browsers on a Windows computer. Note that all these browsers have recently been updated to their most current versions (as of March 3, 2014). Ok, Safari is no longer formally supported on Windows, but you get the idea. What could be the problem which causes such vastly different views?
Internet Explorer
Firefox
Chrome
Opera
Safari
I know I haven’t even included any mobile browsers. However, clearly something is wrong. This would be one of the reasons I insist that students check their work in multiple browsers. I wonder what the problem is. Let’s see who can post the first comment that correctly identifies the problem.
Loading ...