Fixing Layout Bug in Hacked Arras Theme

Problem is sidebar “drops” in subsequent pages of the home page.

Investigating…

  1. Using Arras 1.5.1.2, with a few tweaks, so at first suspected hacked templates.
  2. Specific difficulty is common with CSS layouts using floats, but…
  3. Weird, this only happens when “paged”… no, actually, only on the second page!?
  4. 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’s html body.rtl div#wrapper div#main.clearfix div#container.clearfix div.navigation div.floatleft a, outside #content.
  5. 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.
  6. … 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 additional div[dir=rtl]. (Divitis! And what’s with the redundant dir attribute?)
  7. 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.
  8. Anyway, un-publishing that post fixes the layout.
  9. 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”>.
  10. Tracing the execution to find which PHP templates rendered this mess is so painful!
  11. 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
  12. 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"]
  13. 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.


Comments are closed.