WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Category pages are breaking css (10 posts)

  1. johnpanz
    Member
    Posted 2 years ago #

    Hi,

    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?

  2. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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 http://validator.w3.org/ ?

  3. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #

    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.

  4. johnpanz
    Member
    Posted 2 years ago #

    Hi guys,

    thanks for thw quick response, heres the site

    http://test.accmfg.com.au/category/articles/

    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
    http://test.accmfg.com.au/about/

    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; ?>
    
    		</div>
    	</div>
    
    <?php include(TEMPLATEPATH."/sidebar.php");?>
    
    </div>
    
    <?php // The main column ends  ?>
    
    <?php get_footer(); ?>

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

  5. csleh
    Member
    Posted 2 years ago #

    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?

  6. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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;
    	}

    and

    .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.

  7. csleh
    Member
    Posted 2 years ago #

    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:

    #content.category{}
    #content.archive{}
  8. bossaxe
    Member
    Posted 2 years ago #

    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.
    http://soccertalk.us/author/Ravey/ (everything is to the left)
    http://www.soccertalk.us (everything is centered)

    any suggestions?

    regards,

  9. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    @bossaxe
    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 {
    		text-align:left;
    		margin: 5px 5px 5px 5px;
    		float:left;
    }

    possibly change to:

    #content .author {
    		text-align:left;
    		margin: 5px 5px 5px 5px;
    		float:left;
    }

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

  10. bossaxe
    Member
    Posted 2 years ago #

    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,

Topic Closed

This topic has been closed to new replies.

About this Topic