WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] H2 tag completely ruins styling when included in code? (5 posts)

  1. The Night Fox
    Member
    Posted 2 years ago #

    Ok, so I wanted my category template to look the same as my index template so I more or less copied the code from index.php to category.php. I added a header to the top of my catefory template thast does not appear on my index page so that I could add the category name.

    The problem is that at the top of my category.php file there is the following snippet of code

    <div id="top">
    <?php if (is_category()) : ?>
    		<h2 class="pagetitle"><?php single_cat_title(); ?></h2>
    		<?php elseif (isset($_GET['paged']) && !empty($_GET['paged'])) : ?>
    		<h2 class="pagetitle">Blog Archives</h2>
    		<?php endif; ?>
    </div>

    That's how the code should be written, but it ruins the styling and ends up looking like this:

    Picture

    Note that the grey bar that says "GameStop Coupons" looks correct, but it pushes the post to the bar at the side leaving a white space.

    If I take the php out of div id=top so that it looks like this:

    <div id="top"></div>
    
    <?php if (is_category()) : ?>
    		<h2 class="pagetitle"><?php single_cat_title(); ?></h2>
    		<?php elseif (isset($_GET['paged']) && !empty($_GET['paged'])) : ?>
    		<h2 class="pagetitle">Blog Archives</h2>
    		<?php endif; ?>

    Then the styling looks lke this. but the text obviously isn't displayed in the grey header bar.

    Picture

    Does anyone have any idea why a small bit of text messes up the styling completely?

    Pastebin of layout.css (div.listpost controls the styling for the blogroll on the category page.)

    Any help would be greatly appreciated!

  2. torlowski
    Member
    Posted 2 years ago #

    my guess would be that it's not the H2 CSS rule that messing things up, but the CSS for whatever comes below it on the theme file you're using.

    Check the CSS for the div or whatever that wraps the post entries below the H2 in the theme file, and make sure it's got clear:both in the CSS. That should do the trick, but hard to tell without seeing more of the code or a live link to the site.

    HTH...

  3. The Night Fox
    Member
    Posted 2 years ago #

    Hi,thanks for the reply.

    Here is a link to the test site. If you could take a look that would be great. I've been looking over the code for hours and still can't figure it out!

  4. torlowski
    Member
    Posted 2 years ago #

    Open style-section-colors.css in your editor and edit the rule at line 101 to include clear:both between the { }. That should do it.

  5. The Night Fox
    Member
    Posted 2 years ago #

    It worked!

    I can't thank you enough, it was driving me crazy!

    Thanks again :D

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.