Support » Themes and Templates » Sidebar displays problems in IE

  • I’m hoping there’s a webmonkey here who can help me. I recently modified a default Kubrick template so that it became a simple two-column layout with graphically separated items.

    Everything looks fine in Firefox and Opera (see for yourself), but in IE the sidebar is kicked down way to the bottom. I can’t for the life of me figure out why it’s doing this.

    This is the CSS file, if anyone would be so kind as to take a gander.

    I validated both the XHTML (1.1) and CSS to eliminate any obvious technical goofs, but as we all know, compliant code doesn’t mean bupkus to IE.

Viewing 4 replies - 1 through 4 (of 4 total)
  • can you paste your main template to so we can take a look at the template layout.

    Typically, sidebars getting pushed to the bottom is the result of something being too wide, either in the sidebar or in the content.

    Also, sometimes IE can’t tell what the size of a container is. So, if you have a container div set to 480px (your #content div), but you set something within that container to a percentage (100% .post div), it may push the percentage div out wider than the container div because it doesn’t recognize the container being a set width.

    Try taking out the 100% in .post or try changing .post to a fixed width and see if that makes a difference.

    Other than that, I didn’t see anything else jumping out at me.

    <?php get_header(); ?>
    <div id="content">
    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title('-image-'); ?></a></h2>
    <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small><?php the_meta(); ?>

    <div class="entry">
    <?php the_content('Read the rest of this entry &raquo;'); ?>

    <p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>

    <?php endwhile; ?>

    <?php else : ?>
    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>
    <?php include (TEMPLATEPATH . "/searchform.php"); ?>
    <?php endif; ?>

    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    here’s what i do….

    sometimes you have to give different width definitions for firefox and ie.

    firefox understands the !important command, while ie doesn’t… so you can tell firefox something is important and ie will ignore it.

    so, i’d take your original width (whatever it is) in your css and do this:

    width:200px !important;

    because ie adds padding and margin that firefox doesn’t, this will tell ie to make your menu smaller. if you tweak with the numbers, you can get your menu to look exactly the same in both IE and firefox…

    hope that helps.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sidebar displays problems in IE’ is closed to new replies.