www.webdeveloper.com
Results 1 to 8 of 8

Thread: CSS weird on one type of page

  1. #1
    Join Date
    Dec 2011
    Posts
    18

    CSS weird on one type of page

    Hi everyone,

    My website is www.ironwhisk.com. The right sidebar looks normal until you use the search bar on the right hand side.
    If you search for something that doesn't exist (e.g. "asdfasg") then everything is alright. If results do exist (e.g. "chocolate"), the right sidebar moves.

    Any ideas how I can fix this issue?

    Thanks so much,

    Ilan

  2. #2
    Join Date
    Aug 2012
    Posts
    155
    After search you have a div called sidebar-secondary which appears to be inside your content div when it should be outside and looking at the source code I would say it is because you are not closing some divs above (specifically the divs for the posts)

  3. #3
    Join Date
    Dec 2011
    Posts
    18
    Hey, thanks for your reply.

    That's what I was thinking but I'm not sure why. The relevant php code is below, and all the div tags seem to be ok.

    PHP Code:
    <?php get_header(); ?>

    <div id="main">

    <div id="adtop">
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-2637633606355131";
    /* top ad */
    google_ad_slot = "6411467690";
    google_ad_width = 728;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>

        <div id="content">

    <?php if ( have_posts() ) : ?>
        <h1 class="archive"><?php echo $wp_query->found_posts?> <?php printf__'Search Results for <strong>%s</strong>''ari' ), '' get_search_query() . '' ); ?></h1>
        
        <?php get_template_part'loop' ); ?>
        
        <?php else : ?>
        <h1 class="archive"><strong><?php _e'No Search Result Found''ari' ); ?></strong></h1>
            <div class="post">
                <p><?php _e'Sorry, but nothing matched your search criteria. Please try again with some different keywords.''ari' ); ?></p>
            </div>
    <?php endif; ?>

        </div>
        <!--end Content-->

    <?php get_sidebar('secondary'); ?>

    </div>
    <!--end Main-->

    <?php get_footer(); ?>

  4. #4
    Join Date
    Aug 2012
    Posts
    155
    Have a look in your loop template as what is being displayed is not in this code as it is happening when actual results are found and the layout then is determined by the loop template.

  5. #5
    Join Date
    Dec 2011
    Posts
    18
    There's not even a mention of sidebar in here though.

    PHP Code:
    <?php /* If there are no posts to display, such as an empty archive page */ ?>
    <?php 
    if ( ! have_posts() ) : ?>
            <h1><?php _e'Not Found''ari' ); ?></h1>
            <p><?php _e'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.''ari' ); ?></p>

    <?php endif; ?>
    <?php 
    /* Start the Loop. */ ?>
    <?php 
    while ( have_posts() ) : the_post(); ?>

    <div id="post-<?php the_ID(); ?><?php post_class(); ?>>

        <?php if (is_sticky()) echo __'<h3 class="sticky-label">Featured</h3>''ari' ); ?>
        
    <?php the_time('l, F d, Y'?>
            <a href="<?php the_permalink(); ?>" title="<?php printfesc_attr__'Permalink to %s''ari' ), the_title_attribute'echo=0' ) ); ?>" rel="bookmark"><h2><?php the_title(); ?></h2></a>
    <?php _e'Written by''ari' ); ?> <?php the_author() ?> // <?php comments_popup_link__'Leave a comment''ari' ), __'One comment''ari' ), __'% comments''ari' ) ); ?>
    <br>
    <br>
    <div id="forlinks">
        <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
                <?php the_excerpt(); ?>
                <p class="meta"><span><a href="<?php the_permalink(); ?>">
        <?php else : ?>

                <?php the_content__('Read more >>''ari' ) ); ?></div>

                <div class="clear"></div>
                
                <?php wp_link_pages( array( 'before' => '<div class="page-link">' __'Pages:''ari' ), 'after' => '</div>' ) ); ?>

    <?php if(function_exists('selfserv_shareaholic')) { selfserv_shareaholic(); } ?>                
        <?php endif; ?>
    <?php 
    if ( countget_the_category() ) ) : ?>    
                    <?php endif; ?>

        </div>
        <!--end Post-->


            <?php comments_template''true ); ?>

    <?php endwhile; // End the loop. ?>

    <?php /* Display navigation to next/previous pages when applicable */ ?>
    <?php 
    if (  $wp_query->max_num_pages ) : ?>
                    <p class="previous"><?php next_posts_link__'&larr; Older posts''ari' ) ); ?></p>
                    <p class="next"><?php previous_posts_link__'Newer posts &rarr;''ari' ) ); ?></p>
    <?php endif; ?>

  6. #6
    Join Date
    Aug 2012
    Posts
    155
    As I said before, it is nothing to do with the sidebar, it is to do with the fact that one or more divs before the sidebar have not been closed and looking at your code, it is this div
    Code:
    <div id="post-<?php the_ID(); ?>"
    It looks like it should be closed where you have the 2 br tags

  7. #7
    Join Date
    Dec 2011
    Posts
    18
    I moved the div from
    PHP Code:
    <?php endif; ?>

        </div>
        <!--end Post-->
    to right after the br tags and it didn't fix it, only made the formatting worse.

  8. #8
    Join Date
    Aug 2012
    Posts
    155
    Looking again, I said to put it in the wrong place. Try closing the div just before the endwhile.

    If you look at your source code on the live page you will see that the div is not being closed and will hopefully help you work out where it needs closing in your loop. Sometimes just a bit of trial and error works and this is definitely what is breaking your layout.

    This is a section of your source code where you should be able to see that you have 2 divs being opened (the post div and the forlinks div) and only one being closed:
    Code:
    <div id="post-2463" class="post-2463 post type-post status-publish format-standard category-breakfast category-cakes category-desserts tag-breakfast-2 tag-cake tag-cinnamon tag-coffee tag-cream-cheese tag-pecans">
    
    		
    Monday, February 25, 2013		<a href="http://www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/" title="Permalink to Cinnamon Swirl Coffee Cake" rel="bookmark"><h2>Cinnamon Swirl Coffee Cake</h2></a>
    Written by Ilan // <a href="http://www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/#comments" title="Comment on Cinnamon Swirl Coffee Cake">9 comments</a><br>
    <br>
    
    <div id="forlinks">
    				<p>Everyone should have a quick, simple recipe that can impress a crowd. You don’t always have enough time to make a bamboo cake, but that doesn’t mean you have to settle for mediocrity. You shouldn’t have to settle at all, &hellip; <a onclick="javascript:pageTracker._trackPageview('/outgoing/www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/');"  href="http://www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/">Read more <span class="meta-nav">&#62;&#62;</span></a></p>
    			<p class="meta"><span><a href="http://www.ironwhisk.com/2013/02/cinnamon-swirl-coffee-cake/">
    		
    				
    	</div>
    	<!--end Post-->

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles