[Summary view] [Print] [Text view]

   1  /* $Id: ie.css,v 1.2.2.3 2009/02/13 07:51:18 johnalbin Exp $ */
   2  
   3  /*
   4   * IE CSS
   5   *
   6   * CSS targeted specifically for Internet Explorer for Windows.
   7   *
   8   * While building your theme, you should be aware that IE limits Drupal to 31
   9   * stylesheets total. The work-around for the bug is to enable CSS aggregation
  10   * under: admin / settings / performance.
  11   *
  12   * Properties starting with an underscore _ are for IE 5 and 6 only.
  13   * Properties starting with head:first-child+body are for IE7 only.
  14   * Properties with a child selector (>) or sibling selector (+) are for IE7 only.
  15   *
  16   */
  17  
  18  /*
  19   * Layout CSS
  20   */
  21  
  22  /** body **/
  23    body
  24    {
  25      _text-align: center; /* 1st part of IE5/IE6quirks centering hack */
  26    }
  27  
  28    #page
  29    {
  30      _text-align: left; /* 2nd part of IE5/IE6quirks centering hack */
  31    }
  32  
  33  /** main (container for everything else) **/
  34    #main
  35    {
  36      _zoom: 1; /* Otherwise with a liquid layout, sidebars disappear when resizing the windows in IE6 */
  37    }
  38  
  39  /** floating divs **/
  40    #content,
  41    #navbar,
  42    #sidebar-left,
  43    #sidebar-right
  44    {
  45      _display: inline; /* display inline or double your floated margin! [1] */
  46      _overflow: hidden; /* in ie6, overflow auto is broken [2] and so is overflow visible [3] */
  47      _overflow-y: visible;
  48    }
  49  
  50  
  51  /*
  52   * Tabs CSS - IE 5 and 6 don't support PNGs with alpha transparency.
  53   */
  54  
  55    ul.primary li a,
  56    ul.primary li a .tab,
  57    ul.secondary li a,
  58    ul.secondary li a .tab
  59    {
  60      _display: inline; /* Otherwise the blocks mistakenly get 100% width in IE5 */
  61      _di\splay: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */
  62      cursor: pointer;
  63    }
  64  
  65    ul.primary,
  66    ul.secondary
  67    {
  68      _width: 100%; /* Otherwise IE5 treats the ul as floated */
  69      _w\idth: auto; /* Reset to auto width for IE6 */
  70    }
  71  
  72    ul.primary li a
  73    {
  74      _background: url(images/tab-left-ie6.png) no-repeat left -38px;
  75    }
  76  
  77    ul.primary li a .tab
  78    {
  79      _background: url(images/tab-right-ie6.png) no-repeat right -38px;
  80    }
  81  
  82    ul.primary li a:hover
  83    {
  84      _background: url(images/tab-left-ie6.png) no-repeat left -76px;
  85    }
  86  
  87    ul.primary li a:hover .tab
  88    {
  89      _background: url(images/tab-right-ie6.png) no-repeat right -76px;
  90    }
  91  
  92    ul.primary li.active a,
  93    ul.primary li.active a:hover
  94    {
  95      _background: url(images/tab-left-ie6.png) no-repeat left 0;
  96    }
  97  
  98    ul.primary li.active a .tab,
  99    ul.primary li.active a:hover .tab
 100    {
 101      _background: url(images/tab-right-ie6.png) no-repeat right 0;
 102    }
 103  
 104  /*
 105   * Messages - IE 5 and 6 don't support PNGs with alpha transparency.
 106   */
 107  
 108    div.messages, /* Important messages (status, warning, and error) for the user */
 109    div.status,
 110    div.warning,
 111    div.error
 112    {
 113      _background-image: url(images/messages-status-ie6.png);
 114    }
 115  
 116    div.warning /* Medium priority messages */
 117    {
 118      _background-image: url(images/messages-warning-ie6.png);
 119    }
 120  
 121    div.error /* High priority messages. See also the .error declaration below. */
 122    {
 123      _background-image: url(images/messages-error-ie6.png);
 124    }
 125  
 126  /** Drupal nodes **/
 127    .node-unpublished .node-inner>*
 128    {
 129      position: relative; /* Otherwise these elements will appear below the "Unpublished" text. */
 130    }
 131  
 132  /** Drupal admin tables **/
 133    .section-admin #content tr.even th,
 134    .section-admin #content tr.even td,
 135    .section-admin #content tr.odd th,
 136    .section-admin #content tr.odd td
 137    {
 138      border-bottom: 1px solid #ccc; /* IE doesn't display borders on table rows */
 139    }
 140  
 141  /*
 142   * REFERENCES
 143   *
 144  
 145  1. http://www.positioniseverything.net/explorer/doubled-margin.html
 146  2. http://browservulsel.blogspot.com/2005/04/ie-overflow-auto-scrollbar-overlap.html
 147  3. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
 148  
 149   *
 150   */