All users were logged out of Bugzilla on October 13th, 2018

problem formatting tables

RESOLVED WORKSFORME

Status

()

--
trivial
RESOLVED WORKSFORME
13 years ago
9 years ago

People

(Reporter: domenico.macrini, Unassigned)

Tracking

({testcase})

1.8 Branch
x86
Windows XP
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

3.55 KB, text/html
Details
(Reporter)

Description

13 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.8) Gecko/20051107 Firefox/1.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; it; rv:1.8) Gecko/20051107 Firefox/1.5

I'm trying to use html to build a grafical representation of the lenght of some of italian rivers. To do this I'm using two tables, one for name and the lenght as a numerical value, another for the lenght as a grafica value. 

Rows of the second table are a bit higher of the other so the result is not well formatted. It is more evident as the number of rows increases. I observed the same problem on Mandriva, too. In this case IE works fine!



Reproducible: Always

Steps to Reproduce:
insert this HTML fragment and view it in ff and ie:

<table>
<tr>
    <td width="10%">
      <table>
        <tr> <td> [[Po]]          </td> <td align="right">652[[chilometro|km]]</td></tr>
        <tr> <td> [[Adige]]       </td> <td align="right">410km </td> </tr>
        <tr> <td> [[Tevere]]      </td> <td align="right">405km </td> </tr>
        <tr> <td> [[Adda]]        </td> <td align="right">313km </td> </tr>
        <tr> <td> [[Oglio]]       </td> <td align="right">280km </td> </tr>
        <tr> <td> [[Tanaro]]      </td> <td align="right">276km </td> </tr>
        <tr> <td> [[Ticino]]      </td> <td align="right">248km </td> </tr>
        <tr> <td> [[Arno]]        </td> <td align="right">241km </td> </tr>
        <tr> <td> [[Piave]]       </td> <td align="right">220km </td> </tr>
        <tr> <td> [[Reno]]        </td> <td align="right">211km </td> </tr>
        <tr> <td> [[Volturno]]    </td> <td align="right">171km </td> </tr>
        <tr> <td> [[Secchia]]     </td> <td align="right">171km </td> </tr>
        <tr> <td> [[Volturno]]    </td> <td align="right">171km </td> </tr>
        <tr> <td> [[Tagliamento]] </td> <td align="right">170km </td> </tr>
        <tr> <td> [[Brenta]]      </td> <td align="right">160km </td> </tr>
        <tr> <td> [[Chiese]]      </td> <td align="right">160km </td> </tr>
        <tr> <td> [[Dora Baltea]] </td> <td align="right">160km </td> </tr>

      </table>
    </td>
    <td width="80%">
      <table width="100%"> <tr> <td bgcolor="lightblue" width="100%"> &nbsp;</td> <td width="0%">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="63%">  &nbsp;</td> <td width="37%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="62%">  &nbsp;</td> <td width="38%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="48%">  &nbsp;</td> <td width="52%">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="43%">  &nbsp;</td> <td width="57%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="42%">  &nbsp;</td> <td width="58%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="38%">  &nbsp;</td> <td width="62%">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="37%">  &nbsp;</td> <td width="63%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="34%">  &nbsp;</td> <td width="66%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="32%">  &nbsp;</td> <td width="68%">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="26%">  &nbsp;</td> <td width="74%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="26%">  &nbsp;</td> <td width="74%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="26%">  &nbsp;</td> <td width="74%">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="26%">  &nbsp;</td> <td width="74%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="25%">  &nbsp;</td> <td width="75%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="25%">  &nbsp;</td> <td width="75%"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="25%">  &nbsp;</td> <td width="75%"> &nbsp;</td> </tr> </table>
    </td>
  </tr>
 </table>



Actual Results:  
the rows of the two tables are non alligned

Expected Results:  
the rows of the two tables should be alligned

I observed the same problem on MANDRIVA. Internet Explorer works fine!

Updated

13 years ago
Component: General → Layout: Tables
Product: Firefox → Core
QA Contact: general → layout.tables
Version: unspecified → 1.8 Branch
(Reporter)

Comment 1

13 years ago
I identified a workaround that, maybe, can help to fix the bug:
you need to specify font-size and height to <td>s of both tables and make the the first one 2px larger (I tryed different size and 2 always worked). For example:

<table>
<tr>
    <td>
      <table>
        <tr> <td style="font-size:15px;height:15px"> [[Po]]          </td> <td align="right" style="font-size:15px;height:15px">652[[chilometro|km]]</td></tr>
        <tr> <td style="font-size:15px;height:15px"> [[Adige]]       </td> <td align="right" style="font-size:15px;height:15px">410km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Tevere]]      </td> <td align="right" style="font-size:15px;height:15px">405km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Adda]]        </td> <td align="right" style="font-size:15px;height:15px">313km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Oglio]]       </td> <td align="right" style="font-size:15px;height:15px">280km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Tanaro]]      </td> <td align="right" style="font-size:15px;height:15px">276km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Ticino]]      </td> <td align="right" style="font-size:15px;height:15px">248km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Arno]]        </td> <td align="right" style="font-size:15px;height:15px">241km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Piave]]       </td> <td align="right" style="font-size:15px;height:15px">220km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Reno]]        </td> <td align="right" style="font-size:15px;height:15px">211km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Volturno]]    </td> <td align="right" style="font-size:15px;height:15px">171km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Secchia]]     </td> <td align="right" style="font-size:15px;height:15px">171km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Volturno]]    </td> <td align="right" style="font-size:15px;height:15px">171km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Tagliamento]] </td> <td align="right" style="font-size:15px;height:15px">170km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Brenta]]      </td> <td align="right" style="font-size:15px;height:15px">160km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Chiese]]      </td> <td align="right" style="font-size:15px;height:15px">160km </td> </tr>
        <tr> <td style="font-size:15px;height:15px"> [[Dora Baltea]] </td> <td align="right" style="font-size:15px;height:15px">160km </td> </tr>
      </table>
    </td>
    <td width="70%">
      <table width="100%"> <tr> <td bgcolor="lightblue" width="100%" style="font-size:13px;height:13px"> &nbsp;</td> <td width="0%"  style="font-size:13px;height:13px">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="63%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="37%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="62%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="38%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="48%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="52%" style="font-size:13px;height:13px">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="43%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="57%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="42%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="58%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="38%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="62%" style="font-size:13px;height:13px">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="37%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="63%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="34%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="66%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="32%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="68%" style="font-size:13px;height:13px">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="26%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="74%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="26%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="74%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="26%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="74%" style="font-size:13px;height:13px">  &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="26%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="74%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="25%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="75%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="25%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="75%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
      <table width="100%"> <tr> <td bgcolor="lightblue" width="25%" style="font-size:13px;height:13px">  &nbsp;</td> <td width="75%" style="font-size:13px;height:13px"> &nbsp;</td> </tr> </table>
    </td>
  </tr>
 </table>



This is not a great solution, because in this way browser default settings are ignored, but it works both in ie and ff.

Comment 2

10 years ago
Created attachment 343728 [details]
testcase

Comment 3

10 years ago
I think this is invalid, the rows do not align in IE
Keywords: testcase

Comment 4

9 years ago
we render this like IE8
Status: UNCONFIRMED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.