I have never met a web designer that doesn’t despise Internet Explorer and I probably never will. There are a myriad of reasons for this widespread antipathy, but most of them have something to do with IE’s refusal to follow web standards. This article focuses on yet one more of those issues and provides a fairly simple solution.

If you have ever tried to create an expandable curved box with a border through the common technique of using multiple divs and background images you probably had an unpleasant surprise when you tested the page in IE. For some reason, Internet Explorer turns all of your careful coding into a jumbled mess. Below is an example of such a box.

I personally went to great lengths to find a solution to this problem, and for months it eluded me, until one night for no apparent reason I had the idea of giving a height of 100% to all of the divs involved (written in your style sheet as height: 100%). I tried it and it instantly the problem went away. Here is the same box after having all of the tags involved assigned a height of 100%

I don’t know why this works, and I don’t really care to find out. Trying to understand the rational of IE bugs is like trying to figure out why a schizophrenic believes he is Napoleon. The answer you find isn’t likely to expand your world. This example does point out a larger pattern of issues with vertical repeating background images and Internet Explorer. In my experience I have found that when a repeating vertical background image responds strangely in IE while not having any issues in normal browsers (Firefox, Netscape or Opera) chances are you can fix it by adding a height of 100% to the element involved.