/* ==========================================================================
   CSS Hacks and Layout Fixes for Internet Explorer 6 (IE6)
   ========================================================================== */

/* 
  1. Universal Box Model Fix 
  IE6 uses a non-standard box model in Quirks Mode, but even in Standard Mode 
  (with a proper DOCTYPE), it has issues. If your site triggers Quirks Mode, 
  IE6 includes padding and borders inside the specified width/height.
*/
* {
    /* Safe alternative for layouts: apply padding/borders to inner containers rather than layout blocks */
}

/* 
  2. The Famous Double-Margin Bug 
  When a floated element has a margin in the same direction as the float, 
  IE6 doubles the margin size. Fix: display: inline;
*/
.float-left {
    float: left;
    margin-left: 20px;
    _display: inline; /* Executed ONLY by IE6 */
}
.float-right {
    float: right;
    margin-right: 20px;
    _display: inline; /* Executed ONLY by IE6 */
}

/* 
  3. Peek-a-boo Bug & Guillotine Bug (HasLayout Fix)
  IE6 randomly hides text or cuts off background colors next to floated elements.
  Giving the parent container "HasLayout" via `zoom: 1;` resolves 90% of IE6 rendering bugs.
*/
.container, 
.clearfix, 
.row, 
article, 
section {
    _zoom: 1; /* Triggers HasLayout safely in IE6 without breaking modern browsers */
}

/* 
  4. Clearfix for IE6 
  Modern pseudo-element clearfixes (:after) don't work in IE6. 
*/
.clearfix {
    _zoom: 1;
}

/* 
  5. Min-Width and Max-Width Workaround 
  IE6 completely ignores min-width, max-width, min-height, and max-height.
  We simulate them using IE-specific dynamic expressions (JavaScript inside CSS).
*/
.responsive-container {
    width: 100%;
    /* Limit layout width between 760px and 1200px */
    _width: expression(document.body.clientWidth < 762 ? "760px" : (document.body.clientWidth > 1202 ? "1200px" : "auto"));
}

.box-min-height {
    min-height: 200px;
    /* IE6 treats 'height' exactly like 'min-height' if the content overflows, but we must override it for modern browsers */
    _height: 200px; 
}

/* 
  6. Transparent PNG-24 Alpha Channel Fix 
  IE6 doesn't support alpha transparency in PNG images natively (renders them with a solid grey/blue background).
  Fix: Use AlphaImageLoader filter.
*/
.logo {
    background-image: url('images/logo.png');
    /* Hide the normal background for IE6 and inject the DXFilter */
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='crop');
}

/* 
  7. Position: Fixed Simulation 
  IE6 treats position: fixed as position: absolute. 
  To lock an element (like a sticky header or sidebar), we use absolute positioning bound to the HTML scroll.
*/
.ie6-fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    
    /* IE6 Fallback */
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
}

/* 
  Quick Tip for HTML/CSS integration:
  For absolute stability, wrap your IE6 fixes in Conditional Comments inside your HTML file:
  
  <!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie6-fixes.css" />
  <![endif]-->
*/