css layout проблема размещения divs внутри td cell

Question

Я переустанавливаю старую страницу asp, чтобы обновить ее новыми требованиями. Я пытаюсь поместить некоторые теги div внутри ячейки td, потому что таблица внутри td-ячейки не достигнет того, что я был после. Итак, в основном у меня есть div, который должен выровняться в верхнем левом углу, другой div, который также должен соответствовать верхнему заполнению остальной части пространства, div ниже строки с текстом, div ниже того, который содержит изображение, которое должно центрироваться по горизонтали и вертикали, а окончательный div ниже того, который должен идти ниже изображения и выровняться по нижней части ячейки. Я (см. Код ниже) заложил его так, чтобы он работал в IE, но он выглядит как хрен в chrome и firefox, где я ошибаюсь?

<td style="position:relative;"> 
         <div style="position:absolute; width:10%; top:0; left:0;z-index:1;font-family:Verdana;font-size:small;color:#22476C;"> 
          <%=(sCount+1) + ((pg-1)* PageSize)%>.) 
         </div> 

         <div style="position:absolute; width:100%; top:0; left:0%;z-index:2; text-align:center;"> 
          <a style="font-family:Verdana;font-size:small;font-weight:bold;color:#22476C;" href="results.asp?pubid=<%=PubID & "&date=" & Server.URLEncode(w_RunDate) & "&ttype=" & tType%>" target="_top"> 
           <%=rs("Publication")%> 
          </a> 
         </div> 

         <div style="margin-top:20px;text-align:center;font-family:Verdana;font-size:x-small;color:#22476C;"> 
          <%=pubRunDate%> 
         </div> 

         <div style="text-align:center; vertical-align:middle;display:block;padding-bottom:120px;"> 
          <img src="<%=LastThumb%>" style="border:solid 1px black;" alt="" /> 
         </div> 

         <div style="position:absolute; left:0; bottom:0;" > 
          <table border="1" cellpadding="0" cellspacing="0" class="verdanaSmall" style="width:100%;background-color:#D3DAE1; vertical-align:bottom;"> 
           <tr> 
            <td style="width:32%;text-align:center;"> 
             <%=Replace(rs("Section"),"0","") & Fix(rs("Page")) & rs("Suffix")%> 
            </td> 
            <td style="width:68%;text-align:right; padding-right:10px;"> 
             <%=InvoiceString & " " & SaveString%> 
            </td> 
           </tr> 
           <tr> 
            <td style="text-align:right;"> 
             <%=w_Agency%>:&nbsp; 
            </td> 
            <td> 
             <%=rs("AgencyName")%> 
            </td> 
           </tr> 
           <tr> 
            <%=RightCellA%> 
           </tr> 
           <tr> 
            <td style="text-align:right;"> 
             <%=w_Advertiser%>:&nbsp; 
            </td> 
            <td> 
             <%=rs("AdvertiserName")%> 
            </td> 
           </tr> 
           <tr> 
            <%=RightCellB%> 
           </tr> 
           <tr> 
            <td style="text-align:right;"> 
             <%=w_Description%>:&nbsp; 
            </td> 
            <td> 
             <%=Left(rs("Keyword"), 23)%> 
            </td> 
           </tr> 
           <tr> 
            <td style="text-align:right; padding-bottom:7px;"> 
             Size:&nbsp; 
            </td> 
            <%=RightCellC%> 
           </tr> 
          </table> 

         </div> 
        </td> 

Answer 1

Мое предположение - не имея живой пример страницы - это то, что ваша обивка и ширина% подсчитывают по-разному в Mozilla, кроме того, иногда Mozilla требует «дисплей: встроенный блок», чтобы отобразить DIV и Теги те же, что и IE.

Я бы очень рекомендовал изучить различия в том, как эти два браузера интерпретируют CSS, в частности, их расчеты заполнения/поля.

Последнее примечание - вы вставляете таблицу в таблицу, которая не будет соответствовать спецификациям W3C.