CODEWITHSUNDEEP
html-tablepositionparentinternet-explorer-6absolute
user773085
user773085

Reputation: 31

Absolute position relative which parent in tables? (IE6 vs Firefox/Chrome)

I have a piece of code that do as I want in IE6 but not in Chrome/Firefox:

In IE6, the img is displayed with absolute position relative the td, as I wanted/expected. In Firefix/Chrome the img is displayed relative the outer div.

<div>
      <table>
            <tr>
                <td class="rel cell">
                    <img src="style/easypos_mobile/icons/pencil.png" class="icon" onclick="_onclick.newArticle_andraNr();"/>
                </td>
            </tr>
     </table>
</div>

.rel
{
    position: relative;
}

.icon
{
    position: absolute;
    top: 3px;
    right: -23px;
}

.cell
{
    width: 186px;
}

Upvotes: 0

Views: 606

Answers (1)

user773085
user773085

Reputation: 31

Found this stuff:

The specs leave it open to the User-Agent to decide if a table-cell
can act as a container for absolute positioned objects. http://www.w3.org/TR/CSS21/visuren.html#propdef-position (note the 'effect of 'position:relative' on table-row-group, table- header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined').

This fixed it:

<table><tr>
   <td style="position: relative; width: 180px;">
     <div style="position:relative;width:100%;height:100%;">
       <img src="imageA.gif" class="status">
       <img src="imageB.gif" class="status">
     </div>
  </td>
</tr></table>

Upvotes: 1

Related Questions