mrbs_ielte7.css

/* display: table/table-row/table-cell do not work in IE6/7.   So instead we use in-line */
/* blocks.    But they don't work perfectly either.    But you can get most of the way   */
/* by using display: inline in a subsequent declaration, which magically does the trick, */
/* albeit with a few limitations.                                                        */

div#header {
  display: block;          /* Undo the display: table      */
}

#header ul {
  display: block;          /* Undo the display: table-row  */
}

#header li {
  display: inline-block;   /* Undo the display: table-cell */
  border-bottom-width: 0;  /* can't use a bottom border as the ul isn't full width  */
  padding: 0 0.5em;        /* we can't rely on the table display to stretch the elements */
}

#header li {
  display: inline;    /* magic to force IE to do something like inline-block */
  cursor: default;    /* to stop the text cursor being displayed in IE7 */
}

#header li a {
  display: inline;    /* can't use block here now - throws out positioning in IE6  */
                      /* and doesn't extend link area in IE7 or IE6               */
}

table.prettytable {
  border-collapse: collapse;  /* undo the separate which we only needed for rounded corners */
}

table.prettytable th,  table.prettytable td{
  border: 1px #A6B3BE solid;
}

div#content {
  word-wrap: break-word;  /* IE proprietary.  Need this to stop long words forcing the div to expand */
}