The My Sections user page completely screws up my HTML5 template. I have no idea what it's doing. I've attached screenshots of the damage, including portions of Firebug's HTML hierarchy view, so you can see the havoc it's wreaking.

I've tried moving some tags around to see if I could figure out what's going on, but haven't been able to decipher the problem so far. I'll keep at it (as this is the last thing to fix before the site goes live) and post back if I can figure it out.

Comments

lanny heidbreder’s picture

Okay, there are two culprits at play here.

Here's the content area of my page.tpl.php:


<section id="content">
        <div class="wrapper">
            <section id="main">
                <?php print $messages ? $messages : ''; ?>
                <?php /* print $breadcrumb ? $breadcrumb : ''; */ ?>
                <?php print $title ? '<h1>'.$title.'</h1>' : ''; ?>
                <?php print $tabs ? $tabs : ''; ?>
                <?php print $help ? $help : ''; ?>
                <?php $thefront = node_load(11); ?>
                <?php if($is_front) {
                         print node_view($thefront);
                         } else { print $content; } ?>
                
                <?php if($support): ?>
                  <section id="support">
                    <?php print $support; ?>
                  </section>
                <?php endif; ?>
                
                
            </section> <!-- #main -->

            …

        </div> <!-- .wrapper -->
</section> <!-- #content -->

And here's the corresponding HTML of the My Sections page:


<section id="content">
	<div class="wrapper">
		<section id="main">
			<h1>My sections -- Fake teacher</h1>
			
			<ul class="tabs primary">
				<li ><a href="/users/fake-teacher"><span>View</span></a></li>
				<li ><a href="/user/3/edit"><span>Edit</span></a></li>
				<li class="active" ><a href="/user/3/sections" class="active"><span>My sections</span></a></li>
			</ul>
		</ul>
	</div>
	
	<div id="menu-access">
		<ul class="tabs secondary">
			<li><a href="/user/3/sections/444">District Administration</a></li>
			<li><a href="/user/3/sections/445">Hoxie High School</a></li>
			<li><a href="/user/3/sections/446">Hoxie Elementary</a></li>
		</ul>
		
		<div class="clear"></div>												
		
		<div id="menu-access-create">
			<div class="item-list">
				<h3>Create content</h3>
				
				<ul>
					<li class="first"><a href="/node/add/assignment?section=444">Create new Assignment</a></li>
					<li><a href="/node/add/event?section=444">Create new Calendar event</a></li>
					<li><a href="/node/add/gallery?section=444">Create new Gallery</a></li>
					<li><a href="/node/add/lesson-plan?section=444">Create new Lesson plan</a></li>
					<li><a href="/node/add/organization-info?section=444">Create new Organization info</a></li>
					<li><a href="/node/add/story?section=444">Create new News story</a></li>
					<li><a href="/node/add/support-request?section=444">Create new Support request</a></li>
					<li><a href="/node/add/teacher-info?section=444">Create new Teacher info</a></li>
					<li class="last"><a href="/node/add/teacher-resource?section=444">Create new Resource</a></li>
				</ul>
				
			</div>
		</div>
		
		<h2>District Administration</h2>
		
		<p>The table below shows the content assigned to this section. <em>You may not be able to edit all content.</em> Ask your site administrator if you have questions about this page.</p>
		
		<p>You may use the links to the right to create new content in this section.</p>
		
		<table class="sticky-enabled">
 			<tr>
 				<th>Title</th>
 				<th>Author</th>
 				<th>Type</th>
 				<th>Status</th>
 				<th>Operations</th>
 			</tr>
		</table>
</section> <!-- #main -->

It's hard to tell because it won't keep my effing indentation, but there are two problems with the rendered HTML. At the end of the second "paragraph" of code in the second snippet above, there's a spurious </ul></div>. This is the main problem that causes the HTML hierarchy to be so screwed up. Also, the <div id="menu-access"> is never closed properly.

I'm digging through the PHP now to see if I can come up with a patch.

agentrickard’s picture

That ul / div issue is coming from tabs primary -- e.g. the menu system -- not MNE.

The lack of closure around #menu-access should probably get fixed in menu_node_edit_preprocess_page().

function menu_node_edit_preprocess_page(&$vars) {
  $menu = menu_get_item();
  if ($menu['page_callback'] != 'menu_node_edit_page') {
    return;
  }
  $account = $menu['map'][1];
  $pages = menu_node_edit_get_pages($account);
  // We cannot store sub-tabs for every possible user/section combination, so
  // instead we add fake tabs.
  if (count($pages) < 2) {
    return;
  }
  // Now, make the fake second-level tabs.
  $tabs = array();
  foreach ($pages as $mlid => $title) {
    $tabs[] = l($title, 'user/'. $account->uid .'/sections/'. $mlid);
  }
  $vars['tabs'] .= '</ul></div><div id ="menu-access"><ul class="tabs secondary">';
  foreach ($tabs as $tab) {
    $vars['tabs'] .= '<li>'. $tab . '</li>';
  }
  $vars['tabs'] .= '</ul><div class="clear"></div></div>'; // <-- added a </div> here.
}
lanny heidbreder’s picture

That ul / div issue is coming from tabs primary -- e.g. the menu system -- not MNE.

I'm not much of a Drupal developer, so I suppose that's technically possible, but the only page on the whole complete site on which this problem manifests itself is the MNE page. On every other page, including several pages with both primary and secondary local tasks, Drupal plays nicely. So it has to be MNE's interaction with something, even if MNE isn't inserting the code itself.

The only thing that occurs to me is that "Section" is a special word in MNE, and I'm using <section> tags, so maybe MNE interacts with those poorly somehow? Seems far-fetched, but something's happening.

agentrickard’s picture

StatusFileSize
new2.09 KB

My mistake, the extra </ul></div> is coming from menu_node_edit_preprocess_page(), which is faking the presence of the secondary tabs.

It's likely the failure to close the 'menu-access' div id. See #2, and try the last line of the code, where we add an extra </div>

<section> is irrelevant.

What does the page look like in Garland, the default theme? I can't replicate the error on Garland or a custom site theme that's we're using, based on Zen.

Attached is what the same section of the page looks like in Garland, and here there is an extra </ul>.

agentrickard’s picture

Status: Active » Fixed
StatusFileSize
new702 bytes

This should solve the issue. Committed.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.