css layout problem putting divs inside td cell

Question

Hi

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%>:&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

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.