So, there's this really annoying and long-standing forum bug that "squashes" the first column in tables (but only
after you've posted; it doesn't present during preview).
For example, here's a table from one of theymos'
old posts, as it would appear if not for the presence of this bug:
And here's how that table actually displays:
The earliest mention of this bug (that I could find) is from 2014:
the table above is shown correctly in the previewwindow for the post, but after posting the spacing of first column is squashed.
In that same topic, Foxpup pointed out this hinky bit of CSS:
/* prevent gap between post icon and subject */
div#bodyarea table.bordercolor td td td.td_headerandpost td:first-child
{
width: 26px;
}
I don't know who added that CSS, or when it was added, but here's what I think happened:
(*) There's a flaw in original SMF 1.1.19 that makes a variable-length gap appear between a post's icon and its subject (beyond the comment in the CSS, I know this to be the case because that same flaw is present in my own branch of SMF, which is also based on 1.1.19).
(*) Someone attempted repair of that flaw by coming up with a CSS selector to (try to) isolate just the
<td>s that contain each rendered post's icon, so that they could fix the width of those
<td>s to 26px (which does succeed in repairing the "gap" flaw).
(*) The problem is that the selector they came up with has a flaw of its own: it selects
more than just the
<td>s with post icons in them, reaching into the post itself and affecting first-child
<td>s there, too (it does this, by accident, because of an apparent misunderstanding of
descendant selectors: because
descendants are a less specific concept than
children, there's actually nothing in that selector that prevents it from reaching deeper into the post, affecting
<td>s that it was never meant to affect).
I've come up with three ways to fix this bug (I mean, there are many ways, with various pros and cons, but the below three are the ones that make the most sense to me):
Fix AThis just fixes the CSS selector so that it does what the original author clearly intended. I can see an argument for simplifying the selector around a new
class added to the relevant
<td>s, but, there's also something to be said for just leaving everything the way it is (except for one tiny little selector tweak, that is).
--- baseline/Themes/custom1/style.css 2024-08-27 09:53:04.000000000 +0000
+++ modified/Themes/custom1/style.css 2024-08-27 23:11:37.000000000 +0000
@@ -551,7 +551,7 @@
}
/* prevent gap between post icon and subject */
-div#bodyarea table.bordercolor td td td.td_headerandpost td:first-child
+div#bodyarea table.bordercolor td td td.td_headerandpost > table td:first-child
{
width: 26px;
}
This removes the buggy CSS entirely, and then fixes the now-exposed "gap" flaw in a less brittle way. I mean, I get that putting a
width attribute on the
<td> probably gives modern web devs the heebie-jeebies, but, there's plenty of precedent for that in SMF's ancient markup, and there's no real value in having a very small handful of spots in the markup/styling that try to do things "the right way". I think era-appropriate fixes are fine for SMF, and that any serious attempt to modernize the frontend should be done independently of the legacy frontend.
--- baseline/Themes/custom1/style.css 2024-08-27 09:53:04.000000000 +0000
+++ modified/Themes/custom1/style.css 2024-08-27 23:24:18.000000000 +0000
@@ -553,6 +552,0 @@
-/* prevent gap between post icon and subject */
-div#bodyarea table.bordercolor td td td.td_headerandpost td:first-child
-{
- width: 26px;
-}
-
--- baseline/Themes/default/Display.template.php 2010-10-22 01:38:35.000000000 +0000
+++ modified/Themes/default/Display.template.php 2024-08-27 23:32:38.000000000 +0000
@@ -372,9 +372,9 @@
</div>
</td>
<td valign="top" width="85%" height="100%">
<table width="100%" border="0"><tr>
- <td valign="middle"><a href="', $message['href'], '"><img src="', $message['icon_url'] . '" alt="" border="0" /></a></td>
+ <td valign="middle" width="26"><a href="', $message['href'], '"><img src="', $message['icon_url'] . '" alt="" border="0" /></a></td>
<td valign="middle">
<div style="font-weight: bold;" id="subject_', $message['id'], '">
<a href="', $message['href'], '">', $message['subject'], '</a>
</div>';
The problem (as I see it) with either of the previous fixes is that they repair the bug for
all posts (old and new). I guess most people won't really see eye-to-eye with me on this one, but, I'd prefer it if new posts weren't affected by this bug (obviously) but that older posts
were. My thinking is that people have for 10+ years been using all sorts of workarounds and tricks to avoid this bug, and those workaround-remnants are inevitably going to display slightly differently post-fix. From a history-preservation perspective, I like the idea that posts that were constructed in the presence of this bug will not appearance-wise be affected by the fix.
--- baseline/Themes/custom1/style.css 2024-08-27 09:53:04.000000000 +0000
+++ modified/Themes/custom1/style.css 2024-08-27 23:44:01.000000000 +0000
@@ -550,8 +550,8 @@
display: none;
}
-/* prevent gap between post icon and subject */
-div#bodyarea table.bordercolor td td td.td_headerandpost td:first-child
+/* This is an adaptation of an older, buggy CSS selector. It's being kept so that certain posts will display in a bug-for-bug compatible way. */
+div#bodyarea table.bordercolor td td td.td_headerandpost.with_column_bug td:first-child
{
width: 26px;
}
--- baseline/Themes/default/Display.template.php 2010-10-22 01:38:35.000000000 +0000
+++ modified/Themes/default/Display.template.php 2024-08-27 23:55:37.000000000 +0000
@@ -372,7 +372,7 @@
</div>
</td>
- <td valign="top" width="85%" height="100%">
+ <td valign="top" width="85%" height="100%" class="td_headerandpost', $message['id'] < 64471000 ? ' with_column_bug' : '', '">
<table width="100%" border="0"><tr>
- <td valign="middle"><a href="', $message['href'], '"><img src="', $message['icon_url'] . '" alt="" border="0" /></a></td>
+ <td valign="middle" width="26"><a href="', $message['href'], '"><img src="', $message['icon_url'] . '" alt="" border="0" /></a></td>
<td valign="middle">
<div style="font-weight: bold;" id="subject_', $message['id'], '">
@theymos: That last diff is a little confusing because
class="td_headerandpost" is something that's already present in your branch. The relevant change is just to make sure that the icon-containing
<td> has a
width="26" (same as with Fix B), and that the
td_headerandpost <td> comes out either with
two classes (
class="td_headerandpost with_column_bug") or one (
class="td_headerandpost") depending on some predicate that separates old posts from new. If you can pinpoint when this bug was
introduced, then you might also consider changing the predicate to account for that (e.g.
$message['id'] > 8800000 && $message['id'] < 64471000), so that posts that displayed correctly
before this bug, will return to displaying correctly. (Obviously, the message IDs I've used are just examples that need to be replaced with more precise ones.)
