A Testing Sister

I asked my sister to test a web page I was doing for college and she found a weird bug almost straight away. What should look like this:

Ends up looking like this:

The difference is IE. When I tested it in IE9 at home it rendered fine, but when I switched the rendering engine in Firefox to the IE one I got the same effect. This is set by default to render in IE7, thus the weird effect.

I did some digging and it turns out that you can tell the rendering engine to use the IE9 explicitly, or as good as it can, otherwise it will just use the default. To do this you put this tag in the head of your page:

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

So if you want to make sure your code works, get your sister to test it.

Coda: To help her take screenshots, I found this little site which just gives you the instructions.

http://take-a-screenshot.org/