CODEWITHSUNDEEP
htmlcssfirefox
Andrew
Andrew

Reputation: 2813

HTML <tr> tag and position:relative

I am dealing with html writen long time ago and there is a problem with FireFox.
Some tr elements have position property set to relative , which surprisingly makes the border of those tr's invisble. When I remove the style, it all works fine... so the question is:
"How does position:relative affect tr element?" I can't get it.. for me it seems redundant.

Thanks

EDIT:

<table id="table1"  width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#cccccc"><tbody>
<tr class="header" style="position:relative;top:2 px;">
    <th>sdf</th>
    <th>sdf</th>
    <th>sdf</th>
</tr>

.header {
    position:relative;
}


table#table1 {
    border-collapse: collapse;    
}

#table1 th {
    border-collapse: collapse;
    cursor: pointer;
    font-size: 8pt;
    padding: 3px;
    border-left: 1px solid #666666;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
    color: #FFFFFF;
    background-color: #6685C2;
}

#table1 td {
    border-collapse: collapse;
    cursor: pointer;
    font-size: 8pt;
    padding: 3px;
    border: 1px solid #666666;
}

Upvotes: 16

Views: 28627

Answers (3)

holden321
holden321

Reputation: 1183

Use transform instead of position:

.header {
    transform: translateY(2px);
}

Upvotes: 2

Marcin
Marcin

Reputation: 49866

The interaction is probably that position:relative is disabling the border-collapse property. Of course, without seeing any code, it's pretty difficult to tell.

Update: If you look at your code you will see that the tr in question never has a border of its own. Setting position: relative affects display on the th elements. I suggest that you put this down to undefined behaviour.

If you need to position the row relatively, then I suggest that you also change it's display property to one appropriate for relative positioning.

Upvotes: 5

thirtydot
thirtydot

Reputation: 228232

I'm also not entirely sure without seeing code, but:

From the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-position

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.

tr is a table-row.

Upvotes: 74

Related Questions