css layout problem putting divs inside td cell
I am re-laying out an old asp page in order to update it with some new requirements. I am trying to put some div tags inside a td cell because a table within the td cell would not achieve what I was after. So, basically I have a div which should align to the top left, another div which should also align to the top filling the rest of the space, a div below that with a line of text, a div below that containing an image which should be centered horizontally and vertically, and a final div below that which should go below the image and align to the bottom of the cell. I have (see the code below) laid it out so that it works in IE, but it looks like crap in chrome and firefox, where am I going wrong?
<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%>:
</td>
<td>
<%=rs("AgencyName")%>
</td>
</tr>
<tr>
<%=RightCellA%>
</tr>
<tr>
<td style="text-align:right;">
<%=w_Advertiser%>:
</td>
<td>
<%=rs("AdvertiserName")%>
</td>
</tr>
<tr>
<%=RightCellB%>
</tr>
<tr>
<td style="text-align:right;">
<%=w_Description%>:
</td>
<td>
<%=Left(rs("Keyword"), 23)%>
</td>
</tr>
<tr>
<td style="text-align:right; padding-bottom:7px;">
Size:
</td>
<%=RightCellC%>
</tr>
</table>
</div>
</td>
My assumption - without having a live example of the page - is that your padding and width % are calculating differently in Mozilla, additionally, sometimes Mozilla requires 'display: inline-block' in order to display DIV and A tags the same way the IE does.
I would highly recommend researching the differences in the way these two browsers interpret CSS in particular their padding / margin calculations.
Last note - you are embedding a table within a table which will not meet W3C specifications.
精彩评论