Zoffix CSS - IE Hacks and Fixes

IE 5.5 First Letter Bug

Affected browsers: Internet Explorer 5.5 on Windows

 
 
Here is an interesting bug affecting Internet Explorer version 5.5. Imagine you have a container with its width set with margins and some relatively positioned element with text with letter-spacing inside. Everything looks fine until you take a look in IE 5.5. Whoa! Where did the first letter go?! Ahh, who needs it!.

Demo

Hello IE 5.5
HTML:
	<div id="demoContainer">
		<div id="demoInside">Hello IE 5.5</div>
	</div>

CSS:
	div#demoContainer
	{
		margin: 0 30%;
		background: #00d;
	}
	div#demoInside
	{
		position: relative; 
		letter-spacing: .5em;
		background: #0f0;
	}
 
Note: this demo also shows another "Width With Margins Bug" which is triggered an any version of Internet Explorer. In IE 5.5 this demo is missing letter "H" from "Hello". The triggers for this bug are position: relative; letter-spacing; as well as no set width on the parent element. Even though this combination is a rare case, as well as it's appearance in IE version 5.5 only, it is good to know a fix for it just in case you will ever end up with this kind of settings.
There are two solutions that are known to me. To fix this bug you would define either padding-top: or border-top: to the parent element. Furthermore, we will add a negative margin on the inner element to compensate for the added padding or border on the parent. Therefore a fix for the demo above would be the following:
<!--[if IE 5.5]>
	<style type="text/css">
		div#demoContainer
		{
			padding-top: 1px;
		}
		div#demoInside
		{
			margin-top: -1px;
		}
	</style>
<![endif]-->
 
Important note: when I was testing this solution it appeared that IE 5.5 did not react to the above condcom, I assume it is a bug and if you can confirm it please contact me on IRC or post a message in the guest book. However, since this fix is completely clean, we can safely change the condcom to <!--[if IE 5]>.
Suggested reading:
IE Conditional Comments
CSS Padding Property Specification
CSS Margin Property Specification
CSS Position Property Specification
CSS Box Model
That is all! Happy fixing =).