Support » Themes and Templates » Category pages are breaking css

  • Resolved johnpanz



    I’m having trouble with my category page, I’m not sure why, but it is the only page within my site that displays wrong.

    The CSS breaks and the site loses its centre alignment and the footer breaks, and I have checked the code against my other templates and it doesn’t appear to be anything wrong with it, I though maybe there is somthing I’m missing, or a certain setting which could be affecting it?

    Below is my catagory page code.

    [code moderated per Forum Rules – please use the pastebin]

    I’d love some help on this if anybody is familiar with the problem or think’s they might be able to help?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Michael


    Forum Moderator

    link to your site?

    the code on its own is useless – because:
    – nobody can even compare it with the other templates in your theme;
    – appearance in the browser always depends on the interaction of html and css;
    – the misalignment might be caused by some content in the posts.

    have you tried to check the category page with ?

    Chip Bennett


    Theme Review Admin

    Based solely on your description of the problem, the most likely culprit is faulty HTML markup in your category.php template file. You probably have an unclosed (or improperly closed) DIV tag somewhere.

    Hi guys,

    thanks for thw quick response, heres the site

    The other template pages show fine, and I have tested the code from other template pages, by removing all code from category.php and then pasting in the working code from another template and I get the same problem?

    Here is one of the other pages using a page template

    I went through the validator, there were a few mistakes which I fixed up and it didn’t have any effect, I’ve gone through and check all the div’s and I’m pretty much 100% certain there are none missing.

    I’ve also checked throught the posts, but they contain only text, and some bold and list tags.

    Heres one of my working page templates.

    <?php get_header(); ?>
    <div id="content">
    	<div id="contentleft">
    		<div class="postarea">
    		<?php include(TEMPLATEPATH."/breadcrumb.php");?>
    			<h1><?php the_title(); ?></h1>
    			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    			<?php the_content(__('Read more', 'studiopress'));?><div class="clear"></div><?php edit_post_link(__('(Edit)', 'studiopress'), '', ''); ?>
    			<?php endwhile; else: ?>
    			<p><?php _e('Sorry, no posts matched your criteria.', 'studiopress'); ?></p><?php endif; ?>
    <?php include(TEMPLATEPATH."/sidebar.php");?>
    <?php // The main column ends  ?>
    <?php get_footer(); ?>

    Any ideas? Do I need to poast any more of my code?

    These divs all seem accounted for, but perhaps a generated page would be easier to troubleshoot, because an unclosed div (or other tag) will cause those sorts of problems.

    On another note, doesn’t the title tag usually come after the if have_posts tag?



    Forum Moderator

    it is a conflict of css classes – existing ones in the theme, and the ones output by body_class()

    for instance, in style.css:

    .category {
    	background: #FFFFFF url(images/icon_category.gif) no-repeat top left;
    	margin: 0px;
    	padding: 0px 0px 0px 18px;


    .archive {
    	float: left;
    	width: 275px;
    	margin: 0px;
    	padding: 0px 0px 20px 0px;

    find out, where in your theme these css classes are used, and find a workaround.

    The quick fix is to specify those styles only apply inside the content box. So change the names of .category and .archive in your style sheet to:


    Hi guys,

    I am having the same issue with my author.php pages. I have tried everything to get the css to work on those pages. The page alignment is off. (everything is to the left) (everything is centered)

    any suggestions?




    Forum Moderator

    caused by a conflict of an existing .author style in style.css and the .author body_class generated for the author archive page;

    in style.css of your theme, find:

    .author {
    		margin: 5px 5px 5px 5px;

    possibly change to:

    #content .author {
    		margin: 5px 5px 5px 5px;

    (this could be it, or there might be more…)

    Hi Alchymyth, (thats a cooler name than mine!)
    That was the case. Thank you for the direction.

    I am going back through and trying to fix the css as much as possible. I am not as good as you:(

    best regards,

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Category pages are breaking css’ is closed to new replies.