Iron Crusher: HTML Darstellung - Firefox vs IE 8

Beitrag lesen

Ich vergaß den Quellcode:

device.htm  
  
__@__HEADER__@__  
<div class='datatable' id="MeasPoint" style="height: 100%">  
  <table class="MeasuringPoint" height="100%" width="100%">  
    <tr>  
      <td width="20%" style="border-bottom-style: hidden; height: 100%">  
      <table height="100%" width="100%">  
        <tr>  
          <td>  
            <table width="100%" style="border-bottom-style: hidden; height: 100%">  
              <tr>  
                <td colspan="2" id="DeviceName" height="100%">  
                  <b>__@__DEVICENAME__@__ </b>  
                </td>  
              </tr>  
              <tr style="border-bottom-style: hidden; border-top: solid 1px #CCCCCC">  
                <td class="Margin" height="30px"> <b>ID</b> </td>  
                <td class="Margin" height="30px"> __@__ID__@__ </td>  
              </tr>  
            </table>  
          </td>  
        </tr>  
      </table>  
      </td>  
      <td width="65%">  
      <table class="CommentTable" height="43px">  
        <tr>  
          <td id="TextAlignLeft">  
          <div class="Margin">__@__COMMENT__@__</div>  
          </td>  
        </tr>  
      </table>  
      <table width="100%" height="29px">  
        <tr>  
          <td width="37%" height="100%" id="NoBorder" class="nowrap"><b>  
          Calibration Package </b></td>  
          <td id="NoBottomBorder">  
          <table class="MeasPointTableNameAndGroup" width="100%">  
            <tr>  
              <td><b>Name</b></td>  
              <td><b>from Group</b></td>  
            </tr>  
            <tr>  
              __@__CALIBRATION_DATA__@__  
            </tr>  
          </table>  
          </td>  
        </tr>  
        <tr>  
          <td class="MeasPointLowerTable">  
            <center class="Margin"><b>Customer Name</b></center>  
          </td>  
          <td class="MeasPointLowerTable">  
            <center class="Margin">__@__CUSTOMER_NAME__@__</center>  
          </td>  
        </tr>  
        <tr>  
          <td class="MeasPointLowerTable" style="border-bottom-style: none">  
          <center class="Margin"><b>Measuring Point Type</b></center>  
          </td>  
          <td class="MeasPointLowerTable" style="border-bottom-style: none">  
          <center class="Margin">__@__MPT_NAME__@__</center>  
          </td>  
        </tr>  
      </table>  
      <td height="100%" width="15%">  
      <center>  
      <table id="NoBorder" height="100%" width="20%">  
        <tr>  
          <td valign="bottom">__@__EDITDEVICE__@__</td>  
          <td valign="bottom">__@__DATAPACK__@__</td>  
          <td valign="bottom">__@__HISTORY__@__</td>  
        </tr>  
        <tr height="20px">  
        </tr>  
        <tr>  
          <td valign="top">__@__COMMAND__@__</td>  
          <td valign="top">__@__STATUS__@__</td>  
          <td valign="top">__@__DELETEDEVICE__@__</td>  
        </tr>  
      </table>  
      </center>  
      </td>  
    </tr>  
  </table>  
</div>

dazugehörige .css:

  
.datatable table {  
  border-collapse: collapse;  
  background-color: #ffffff;  
}  
  
/******** Verwendet in Device.htm *********/  
.MeasuringPoint {  
  width: 100%;  
  padding: 0px;  
  border: 1px solid #CCCCCC;  
  border-right-style: none;  
  border-left-style: none;  
}  
  
.MeasuringPoint .MeasPointLowerTable {  
  padding: 3px 2px;  
}  
  
.MeasuringPoint td {  
  padding: 0px;  
  text-align: center;  
}  
  
.MeasPointTableNameAndGroup{  
  margin-bottom: -1px;  
}  
  
.MeasPointTableNameAndGroup td{  
  padding: 3px 2px  
}  
  
.MeasPointLowerTable {  
  border: 1px solid #CCCCCC;  
  border-bottom-style: none;  
  border-right-style: none;  
  border-left-style: none;  
  padding: 3px 2px;  
}  
  
#MeasPoint {  
  border: 1px solid #cccccc;  
  border-bottom-style: none;  
}

__@__HEADER__@__ wird dann in php ersetzt mit

<div class="TableHeader"> </div>

in der .css:

.TableHeader {  
  background-image: url(Images/listheader_aqua.gif);  
  width: 100%;  
  height: 16px;  
}