Fixing Layout Bug in Hacked Arras Theme
Problem is sidebar "drops" in subsequent pages of the home page.
Investigating…
- Using Arras 1.5.1.2, with a few tweaks, so at first suspected hacked templates.
- Specific difficulty is common with CSS layouts using floats, but…
- Weird, this only happens when "paged"… no, actually, only on the second page!?
- Let's look at the DOM. The CSS path to the "Older Entries" link is
html body.rtl div#wrapper div#main.clearfix div#container.clearfix div#content.section div.navigation div.floatleft a
, in all but the second page, where instead it'shtml body.rtl div#wrapper div#main.clearfix div#container.clearfix div.navigation div.floatleft a
, outside #content. - That's it then: all three divs #container, #primary, and #secondary should have been inside #main, but on this page the last two aren't, thus breaking the layout.
- … Found it: a spurious </div>, right before an embedded video iframe, in post 39:
html body.rtl div#wrapper div#main.clearfix div#container.clearfix div#content.section div#archive-posts div.traditional div.post-39 div.entry-content p iframe
. That last p should've been inside an additionaldiv[dir=rtl]
. (Divitis! And what's with the redundant dir attribute?) - Can't see it in TinyMCE, only in Firebug, but anyway the editor inserts an img into the post, which is later converted into an iframe, presumably.
- Anyway, un-publishing that post fixes the layout.
- Who's fault? [Ultimate] TinyMCE? Or the user inserted it manually? No, removed it, and this post's layout is still broken, only now a closing </div> seems missing, somewhere before <a name="comments">.
- Tracing the execution to find which PHP templates rendered this mess is so painful!
- The correct DOM of a "single" view (in HAML-like notation ;o):
#main #container #content-top #content #post-156 h3.entry-title .entry-content .about-author .written-by a[name="comments"] #content-bottom #primary
- The broken DOM implicates the WYSIWYG editor:
#post-39 h3.entry-title .entry-content div[data-mce-style] .about-author .written-by a[name="comments"]
- Paragraphs in the correct .entry-content are (needlessly) wrapped in div[style="direction:rtl"], whereas the broken entry uses semantic p elements (and tables for embedded images). Nu. Anyway, the last p contains an
img.mceItemIframe
, and I'm guessing is right (near?) where things went south.
--
The real world is a special case