chxo internets

Simple Workarounds to MSIE CSS Bugs

… or grist for the Web Developers’ Class Action Suit against Microsoft to recover countless hours of our lives that we have lost to their ongoing dysfunctional “support” of web standards.

1. Float bug: if you have a floated element with a margin in the same direction as the float, it needs to have display: inline.
   
   <div style="float: left; margin-left: 1em; display: inline;">foo</div>

   See this article for details. See also this height-related float bug.
    
2. Z-Index bug: if you set a z-index on a positioned element, you need to also set a z-index on its parent container.
   
   <div style="z-index: 10;">
  <div style="position: absolute; top: 10px; left: 1em; z-index: 10;">foo</div>
</div>

   See this article for details.

When we say that web design isn’t rocket science, we’re not talking about MSIE — for that you need an advanced degree in modal quirk mechanics.