Main Page H2s Nesting Wrong?

  • Resolved superkaratemonkeydeathcar

    (@superkaratemonkeydeathcar)


    11 years, 4 months ago

    From the Monte Demo at BFA:

    I Viewed Source and found this:

    <h2>
		<span class="post-format"></span>
		<a href="https://test.bytesforall.com/2012/08/typography-test/" title="Typography Test" rel="bookmark">Typography Test</a>
		<a href="https://test.bytesforall.com/2012/08/typography-test/#comments" class="comment-bubble"  title="Comment on Typography Test">1</a>	</h2>

    Shouldn’t the H2s be around ONLY the title?

    Like this:

    <span class="post-format"></span>

		<h2><a href="https://test.bytesforall.com/2012/08/typography-test/" title="Typography Test" rel="bookmark">Typography Test</a></h2>

		<a href="https://test.bytesforall.com/2012/08/typography-test/#comments" class="comment-bubble"  title="Comment on Typography Test">1</a>

    Or even for the 2nd Excerpt:

    <h2>
		<span class="post-format"></span>
		<a href="https://test.bytesforall.com/2012/08/another-post-with-all-kinds-of-things-in-it-and-a-long-title-too-to-see-how-wrapping-of-long-titles-works-in-this-theme/" title="Another Post with all kinds of Things in it and a long Title, too, to see how Wrapping of long Titles works in this Theme" rel="bookmark">Another Post with all kinds of Things in it and a long Title, too, to see how Wrapping of long Titles works in this Theme</a>
			</h2>

    -Shouldn’t the <span class="post-format"></span> be Outside the H2?

    Just a note

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hey, @super. When I first took a look at that span tag, I thought, “How odd, what’s that doing there? It doesn’t contain anything.”

    When I took a look at the CSS that affects the post-format class, though, I saw this:

    .post-format {
	display: 			none;
	background: 			url(https://sandbox.geefamily.net/wp-content/themes/montezuma/images/icons.png) -120px -144px no-repeat;
	width: 				24px;
	height: 			24px;
	padding: 			5px 13px;
	margin: 			0 10px 0 0;
	vertical-align: 		8px;
	font-size: 			10px;
}

    What became apparent, then is that the span tag, in this situation, is used much like the italic tag in displaying icons. The background property points to an image of multiple icons, and the rest of the properties format the icon. The only property that is preventing the icon from showing up is the display: none; line. If you were to add this CSS rule to the end of various.css:

    .post-format {
   display: inline;
}

    You will then see a dark gray pencil icon before each post title.

    So to answer your question, the span does belong within the H2 tag, because you want the icon to be on the same line as the post title (like the comment bubble). If it were outside, then the post title would appear below the icon, since the H2 tag is a block style by default.

    Thank you very much for pointing this out, though. As I mentioned earlier, I had never noticed this before. Now I know of an option for displaying icons before post titles, and it would probably be easy to code the CSS necessary for the icons to change colors, like the icons for the menus and widgets.

    Thread Starter superkaratemonkeydeathcar

    (@superkaratemonkeydeathcar)

    Wow! Nice detective work, there.

    ” what’s that doing there? It doesn’t contain anything.” -hah! My thoughts, too.

    Thanks very much for the reply!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Main Page H2s Nesting Wrong?’ is closed to new replies.

Tags