HTML/CSS

Consider that you want to display some DIV inside another DIV where the inner DIV always fills out the outer DIV completely:

<style type="text/javascript">
  #outer { width: 256px; height: 256px; }
  #inner { background: red; height: 100%; }
</style>
<div id="outer">
  <div id="inner"></div>
</div>

Width is already correct because the default value of auto keeps the inner DIV at maximum width. So only the height:100% style is needed for this scenario. But what if the inner DIV also has some padding or a border? Then the percent values will not work because according to the W3C box model the border and the padding is added to the width and height. So the inner DIV gets too large. In standard compliant browsers (Even in IE7) this can be solved pretty easy. IE6 needs a little hack. Read on...

As already written in my Stop supporting IE6 article I hoped for IE8 supporting media specifiers in CSS @import statements. The benefit would be to lock out IE6 and IE7 from seeing the CSS definitions without using proprietary IE conditional comments. Fortunately Microsoft really did it, they support this syntax in IE8!

So if a website is going to drop support for IE7 (which may be a good idea because IE7 is still a pain-in-the-ass when it comes to web standards) then it can be done like this:

<style type="text/css">
  @import "common.css" screen;
</style>

If you are a web developer like me then you most likely must test your web pages in at least three incarnations of the evil Internet Explorer. And if you are a linux user like me then you will most likely not use native windows installations to do this. And if you are a Microsoft hater like me then you may have no Windows installation CDs at all. So how are you going to test your stuff in Internet Explorer?

Fortunately Microsoft is so kind to provide some Virtual Machine Images for testing purposes. Unfortunately they are only available for Virtual PC but with some work they can be used in Virtual Box as well. In this article I will describe how to get these images running on Ubuntu Linux 9.04.

Lately I came to the conclusion that it is time to stop support for IE6 on new websites. I'm getting sick of using all those CSS hacks and I finally want to use new CSS selectors everywhere. IE7 is still a bad browser but at least it supports these selectors and (in most cases) even alpha-transparent graphics. It still needs some hacks but it's acceptable for now.