0

I am using drupal 7, and the bootstrap base theme to make a simple theme for a website I am working on. I am having issues with Drupal forcefully changing my html5 hierarchy and it's causing the site to break.

Is there anyone that would know what would cause the issue?

I have attached the code snippet in particular that is causing issues, as well as a screenshot from Chrome's inspector showing the misplacement. I have confirmed it's doing it on at least 4 browsers, so I do believe it's a drupal issue.

<section>
  <a id="main-content"></a>
  <div class="container">
    <section class="<?php print $column_width; ?>">
      <?php if (!empty($tabs)): ?>
        <?php print render($tabs); ?>
      <?php endif; ?>
      <?php if (!empty($page['help'])): ?>
        <?php print render($page['help']); ?>
      <?php endif; ?>
      <?php if (!empty($action_links)): ?>
        <ul class="action-links"><?php print render($action_links); ?></ul>
      <?php endif; ?>
      <?php print render($page['content']); ?>
    </section>

    <aside class="col-sm-4 col-lg-4" role="complementary">
      <?php print render($page['sidebar_second']); ?>
    </aside>  <!-- /#sidebar-second -->
  </div>
</section>

Inspector view

As you can see from the image, the <aside> is being placed outside of the root <section> instead of inside of it (and underneath the other <section>), like the template is telling it to do.

EDIT: The 5 console errors are from image files not being found because I haven't uploaded them yet.

  • 1
    That's probably because you somewhere on your page have a missing opening or closing tag. Most likely some <div>. In my memory you can verify this best in Firefox' "See page source" or what it was called. Not the inspector. The real "Show raw page source" thing. – leymannx Apr 18 at 18:50
  • 1
    Chrome is almost definitely fixing some broken HTML on your behalf, and the result is pushing the <aside> outside the first <section>. If you view the plain source of the page, I'd bet you'll find it inside as expected (albeit with some other broken HTML further up). An easy way to narrow it down is to remove everything inside the inner <section> and re-introduce each part of the output one at a time, checking in the browser, until you find the culprit – Clive Apr 18 at 18:55
  • I should add that this is happening on ALL browsers, not just Chrome. I have confirmed there are no broken tags. – Ex0r Apr 18 at 19:01
  • So it looks like you were correct. After going back and looking, the default views-view-unformatted.tpl.php that I have has an extra tag in it. Not sure where it came from as it's the one inside of the views/theme/ folder. Removing it fixed the issue. – Ex0r Apr 18 at 19:11
0

The comments in this question were helpful, but I can't credit both people so I will post the answer.

My default views-view-unformatted.tpl.php had an extra closing tag inside of it somehow. Not sure how since it's a default views display. Removing the tag fixed the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.