Closed
Bug 318002
Opened 19 years ago
Closed 16 years ago
problem formatting tables
Categories
(Core :: Layout: Tables, defect)
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: domenico.macrini, Unassigned)
Details
(Keywords: testcase)
Attachments
(1 file)
|
3.55 KB,
text/html
|
Details |
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%"> </td> <td width="0%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="63%"> </td> <td width="37%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="62%"> </td> <td width="38%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="48%"> </td> <td width="52%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="43%"> </td> <td width="57%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="42%"> </td> <td width="58%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="38%"> </td> <td width="62%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="37%"> </td> <td width="63%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="34%"> </td> <td width="66%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="32%"> </td> <td width="68%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="26%"> </td> <td width="74%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="26%"> </td> <td width="74%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="26%"> </td> <td width="74%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="26%"> </td> <td width="74%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="25%"> </td> <td width="75%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="25%"> </td> <td width="75%"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="25%"> </td> <td width="75%"> </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•19 years ago
|
Component: General → Layout: Tables
Product: Firefox → Core
QA Contact: general → layout.tables
Version: unspecified → 1.8 Branch
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"> </td> <td width="0%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="63%" style="font-size:13px;height:13px"> </td> <td width="37%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="62%" style="font-size:13px;height:13px"> </td> <td width="38%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="48%" style="font-size:13px;height:13px"> </td> <td width="52%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="43%" style="font-size:13px;height:13px"> </td> <td width="57%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="42%" style="font-size:13px;height:13px"> </td> <td width="58%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="38%" style="font-size:13px;height:13px"> </td> <td width="62%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="37%" style="font-size:13px;height:13px"> </td> <td width="63%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="34%" style="font-size:13px;height:13px"> </td> <td width="66%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="32%" style="font-size:13px;height:13px"> </td> <td width="68%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="26%" style="font-size:13px;height:13px"> </td> <td width="74%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="26%" style="font-size:13px;height:13px"> </td> <td width="74%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="26%" style="font-size:13px;height:13px"> </td> <td width="74%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="26%" style="font-size:13px;height:13px"> </td> <td width="74%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="25%" style="font-size:13px;height:13px"> </td> <td width="75%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="25%" style="font-size:13px;height:13px"> </td> <td width="75%" style="font-size:13px;height:13px"> </td> </tr> </table>
<table width="100%"> <tr> <td bgcolor="lightblue" width="25%" style="font-size:13px;height:13px"> </td> <td width="75%" style="font-size:13px;height:13px"> </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.
I think this is invalid, the rows do not align in IE
Keywords: testcase
we render this like IE8
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•