Skip to content

refactor(webserver): migrate presentational table/iframe attributes to semantic CSS - #102

Merged
ngosang merged 1 commit into
amule-org:masterfrom
ngosang:fix/semantic-table-css
Jun 11, 2026
Merged

refactor(webserver): migrate presentational table/iframe attributes to semantic CSS#102
ngosang merged 1 commit into
amule-org:masterfrom
ngosang:fix/semantic-table-css

Conversation

@ngosang

@ngosang ngosang commented Jun 11, 2026

Copy link
Copy Markdown
Member

Retire the remaining presentational HTML in the default template -- cellspacing=/cellpadding= on every table, width= on td/th (deprecated since HTML 4.01), width=/height= on table (height was never valid HTML, it works via quirks mode), and frameborder=/scrolling=/ width="100%" on iframes -- keeping the quirks mode doctype untouched so the table layout renders exactly as before.

Instead of repeating per-cell utility classes, the recurring page regions get one semantic class on the container table and structural child selectors in style.css. All selectors go through the browser-inserted tbody (table.foo > tbody > tr > td) so nothing leaks into nested tables, and selector matching is unaffected by quirks mode:

  • table.page: the 3-row skeleton of all 8 main pages (full-size table, row alignment, 25px footer cell); the logo / navbar cell widths fold into the existing td.logo-cell / td.navbar-cell rules.
  • table.navbar-table: the trailing 10px spacers and the 190px session-links cell via :nth-last-child, which is robust against the leading nav-button cells.
  • table.footer-bar: the bottom strip (full width, 40px, centered 50% cells) and its two iframes (full width, borderless) via a descendant selector -- safe, the footer bar nests no tables. The log page iframes keep their default border as before.
  • table.tab: the 9 rounded-corner frames; the 24px edge cells and the tab_top/left/right/bottom backgrounds and white content cell are derived from row/cell position. The is a table child, not a tbody child, so it does not disturb row counting.
  • table.prefs-pane: the 7 preference panes (350px centered, 22px / 63px side columns, 25px data rows via tr:not(:first-child) -- header rows never had the height).
  • table.prefs-grid / table.kadnewnode: the two 6px-spacing wrapper tables; prefs-grid sets its column width via td:nth-child(2) because a rowspan=3 cell makes :last-child ambiguous.

cellspacing/cellpadding zero out globally (table { border-spacing: 0 } plus padding: 0 on th/td); the three exceptions become spacing1 (login box frame) and pad4 (search form, with a child selector matching cellpadding's own-cells-only semantics). Genuinely one-off dimensions (login banner, stats columns, log/stats_tree iframes) become w*/h* utility classes next to the existing h10..h200 set, with a p suffix for percentages. Pixel sizes on img stay as attributes -- they are valid, non-presentational HTML. scrolling="no" (obsolete, no outside-CSS equivalent) is replaced by overflow:hidden on the body of the two framed documents, footer.php and stats.php. Also drops the undefined doad-table/kadnewnode dead tokens.

Verified against a running amuleweb: after every intermediate step, headless-Chromium screenshots of all 9 pages plus the two footer frames are pixel-identical to the starting point except for dynamic content (stats graphs, uptime, server user/file counts).

…o semantic CSS

Retire the remaining presentational HTML in the default template --
cellspacing=/cellpadding= on every table, width= on td/th (deprecated
since HTML 4.01), width=/height= on table (height was never valid
HTML, it works via quirks mode), and frameborder=/scrolling=/
width="100%" on iframes -- keeping the quirks mode doctype untouched
so the table layout renders exactly as before.

Instead of repeating per-cell utility classes, the recurring page
regions get one semantic class on the container table and structural
child selectors in style.css. All selectors go through the
browser-inserted tbody (table.foo > tbody > tr > td) so nothing leaks
into nested tables, and selector matching is unaffected by quirks
mode:

- table.page: the 3-row skeleton of all 8 main pages (full-size
  table, row alignment, 25px footer cell); the logo / navbar cell
  widths fold into the existing td.logo-cell / td.navbar-cell rules.
- table.navbar-table: the trailing 10px spacers and the 190px
  session-links cell via :nth-last-child, which is robust against
  the leading nav-button cells.
- table.footer-bar: the bottom strip (full width, 40px, centered
  50% cells) and its two iframes (full width, borderless) via a
  descendant selector -- safe, the footer bar nests no tables. The
  log page iframes keep their default border as before.
- table.tab: the 9 rounded-corner frames; the 24px edge cells and
  the tab_top/left/right/bottom backgrounds and white content cell
  are derived from row/cell position. The <caption> is a table
  child, not a tbody child, so it does not disturb row counting.
- table.prefs-pane: the 7 preference panes (350px centered, 22px /
  63px side columns, 25px data rows via tr:not(:first-child) --
  header rows never had the height).
- table.prefs-grid / table.kadnewnode: the two 6px-spacing wrapper
  tables; prefs-grid sets its column width via td:nth-child(2)
  because a rowspan=3 cell makes :last-child ambiguous.

cellspacing/cellpadding zero out globally (table { border-spacing: 0 }
plus padding: 0 on th/td); the three exceptions become spacing1
(login box frame) and pad4 (search form, with a child selector
matching cellpadding's own-cells-only semantics). Genuinely one-off
dimensions (login banner, stats columns, log/stats_tree iframes)
become w*/h* utility classes next to the existing h10..h200 set,
with a `p` suffix for percentages. Pixel sizes on img stay as
attributes -- they are valid, non-presentational HTML. scrolling="no"
(obsolete, no outside-CSS equivalent) is replaced by overflow:hidden
on the body of the two framed documents, footer.php and stats.php.
Also drops the undefined doad-table/kadnewnode dead tokens.

Verified against a running amuleweb: after every intermediate step,
headless-Chromium screenshots of all 9 pages plus the two footer
frames are pixel-identical to the starting point except for dynamic
content (stats graphs, uptime, server user/file counts).
@ngosang
ngosang merged commit 9330367 into amule-org:master Jun 11, 2026
10 checks passed
@ngosang
ngosang deleted the fix/semantic-table-css branch June 11, 2026 14:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant