Repeating Background Bug in IE 6 and 7

I discovered an interesting bug that occurs in both IE 6 and 7 the other day. Actually, I had seen it before, but I had never been able to figure out a cause or a fix until now.

The bug occurs when you have a background set to no-repeat on an element with an undefined width. When no width is set on the element, usually because it’s inside a parent element that has a set width, the background repeats vertically in IE 6 and 7 even when the background is set to no-repeat.

The fix is easy. Obviously, if this bug occurs when no width is set on the element, simply setting a width fixes the problem. The background will no longer repeat and will show up as it is specified. There you have it!