Проблемы с отображением двух таблиц в div в IE - PullRequest
Новая
       10

Проблемы с отображением двух таблиц в div в IE

0 голосов
/ 01 ноября 2010

Я пытаюсь отобразить две таблицы внутри контейнера div, и он отлично работает в Firefox, и делает именно то, что я ожидаю, но в IE это смещает мою вторую таблицу, чтобы появиться вне моего div. Кто-нибудь получил какие-либо идеи, в чем проблема, что я сталкиваюсь здесь? Если я добавлю одну из таблиц в отдельности, проблем не возникнет, но когда я добавлю вторую таблицу, независимо от того, какая из них будет первой, я получу проблему.

Код для таблиц: 

<div id="contentContainer" style="border: 1px solid black;">
  <table id="filterPostingsTable" align="Left" border="0" style="width:100%;">
    <tr>
      <th>Status</th>
      <th>PositionTitle</th>
      <th>Classification</th>
      <th>Location</th>
      <th>Filter</th>
    </tr>
    <tr>
      <td align="center">
        <select name="filterStatus" id="filterStatus">
          <option selected="selected" value="">Select Status</option>
          <option value="Active">Active</option>
          <option value="Interviewing">Interviewing</option>
          <option value="New">New</option>
        </select>
      </td>
      <td align="center">
        <input name="filterPositionTitle" type="text" id="filterPositionTitle" />
      </td>
      <td align="center">
        <select name="922e5a87-18fd-467f-9e7b-f4210fbd93ea" id="922e5a87-18fd-467f-9e7b-f4210fbd93ea">
          <option value="0">Select One...</option>
          <option value="9c2e6df7-e319-478c-b137-47eff4e4748d">Administrative</option>
          <option value="78ce598b-6dad-4434-9bb5-24429c630943">Certified</option>
          <option value="c75f18a4-e503-428c-8e23-83d1dac21997">Classified</option>
          <option value="77232a27-2c58-4192-bbbf-1b0b493da564">Other</option>
        </select>
      </td>
      <td align="center">
        <select name="filterLocation" id="filterLocation">
          <option value="Select Location">Select Location</option>
          <option value="77c68429-e878-4778-b467-0d684308b188">Desert Foothills</option>
          <option value="d226f2a3-02c4-40c5-b784-949c22647081">District Office</option>
        </select>
      </td>
      <td align="center">
        <input type="submit" name="filterJobs" value="Filter Postings" id="filterJobs" />
      </td>
    </tr>
  </table>

  <table id="jobPostingsTable" class="tablesorter" align="Left" border="0" style="width:100%;float: left">
    <thead>
      <tr>
        <th></th>
        <th>Status</th>
        <th>Position Title</th>
        <th>Classification</th>
        <th>Working Location</th>
      </tr>
    </thead>
    <tbody>
      <tr id="2a62a993-fc3a-4a43-96b6-fd663a724b6e">
        <td>
          <input id="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" type="checkbox" name="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" />
        </td>
        <td>New</td>
        <td valign="middle">
          <span>Systems Analyst</span>
          <a href="getJobDescription.aspx?Description=f863c3c9-fc68-42f8-ae3b-686575ab7a36"><img src="images/pdf.png" style="border-width:0px;" /></a>
        </td>
        <td>Classified</td>
        <td>District Office</td>
      </tr>
    </tbody>
  </table>
</div>

Применимо CSS следующим образом: 

#contentContainer {
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:auto;
margin:0;
width:1000px;
}

Все таблицы установлены на ширину 100%. Кнопки на изображении на самом деле не имеют значения, так как они, кажется, не влияют на проблему со столом, независимо от того, есть они или нет. Обычно такого рода вещи работают просто отлично, но в IE 7 теперь рендеринг выглядит следующим образом:

alt text

1 Ответ

1 голос
/ 01 ноября 2010

Если вы хотите разместить ваши таблицы, им потребуется ширина в пикселях, а не в процентах.

...