WordPress.org

Ready to get started?Download WordPress

Forums

CSS left floating is ignored in IE6 (2 posts)

  1. rgblog
    Member
    Posted 7 years ago #

    Hi All,

    I've been researching everywhere including my advanced css book. Only one strange problem had not been solved and I'm very frastrated with it. I'd so thank you if someone help me out.
    I'm creating my new theme right now.
    Here's my problem: In my category.php (see this page http://endunham.com/web_test/?cat=6), thumbnail div boxes which contains each excerpt post does not left float in IE 6 even if I did the great CSS tutorial (http://css.maxdesign.com.au/floatutorial/tutorial0401.htm)
    I've successfuly made the simlar layout page (http://endunham.com/web_test/?page_id=3) work using the same tutorial.
    I've read through the typical IE bug topic in my book and researched all over the internet. I don't really understand why only this category page does strange behavour.

    Here's my category.php code:

    <?php
    get_header();
    ?>
    
    <!-- Conditional category heading text -->
    <div class="cathead"><h3><?php the_category(','); ?></h3>
    <?php if ( is_category('1') ) : ?>
    <?php echo category_description('1'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('2') ) : ?>
    <?php echo category_description('2'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('3') ) : ?>
    <?php echo category_description('3'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('4') ) : ?>
    <?php echo category_description('4'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('5') ) : ?>
    <?php echo category_description('5'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('6') ) : ?>
    <?php echo category_description('6'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('7') ) : ?>
    <?php echo category_description('7'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('8') ) : ?>
    <?php echo category_description('8'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('9') ) : ?>
    <?php echo category_description('9'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('10') ) : ?>
    <?php echo category_description('10'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('11') ) : ?>
    <?php echo category_description('11'); ?>
    
    <?php endif; ?>
    <?php if ( is_category('12') ) : ?>
    <?php echo category_description('12'); ?>
    
    <?php endif; ?>
    </div>
    <!-- Conditional category heading text ends -->
    
    <!-- Links for each intro pages -->
    <?php if ( is_category('5') ) : ?>
    <div class="catintro"><?php echo ("<a href="http://endunham.com/web_test/?page_id=157">Introduction</a>"); ?></div>
    <?php elseif ( is_category('6') ) : ?>
    <div class="catintro"><?php echo ("<a href="http://endunham.com/web_test/?page_id=158">Introduction</a>"); ?></div>
    <?php elseif ( is_category('7') ) : ?>
    <div class="catintro"><?php echo ("<a href="http://endunham.com/web_test/?page_id=159">Introduction</a>"); ?></div>
    <?php elseif ( is_category('8') ) : ?>
    <div class="catintro"><?php echo ("<a href="http://endunham.com/web_test/?page_id=160">Introduction</a>"); ?></div>
    <?php elseif ( is_category('9') ) : ?>
    <div class="catintro"><?php echo ("<a href="http://endunham.com/web_test/?page_id=161">Introduction</a>"); ?></div>
    <?php elseif ( is_category('10') ) : ?>
    <div class="catintro"><?php echo ("<a href="http://endunham.com/web_test/?page_id=162">Introduction</a>"); ?></div>
    <?php elseif ( is_category('11') ) : ?>
    <div class="catintro"><?php echo ("<a href="http://endunham.com/web_test/?page_id=163">Introduction</a>"); ?></div>
    <?php elseif ( is_category('12') ) : ?>
    <div class="catintro"><?php echo ("<a href="http://endunham.com/web_test/?page_id=164">Introduction</a>"); ?></div>
    <?php else : ?>
    <div class="catintro"><?php echo (""); ?></div>
    <?php endif; ?>
    <!-- Links for each intro pages ends here-->
    
    <div class="guide">Please click on the image for a close-up view.</div>
    <!-- Loop starts here -->
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    <div class="categorypost">
    <!-- Thumbnails starts here -->
    <div class="categorylist" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>"><?php the_excerpt_rss(); ?></a></div>
    <?php $myID = $myID + 1; ; if ($myID % 2 == 0) {echo ("<div class="clearing">&nbsp;</div>" );} ?>
    
    <!-- Add conditional statement -->
    
    <!-- Thumbnails ends here -->
    </div>
    <?php endwhile; else: ?>
    <?php _e('Sorry, this page did not match your request due to the ongoing construction. <br/><img src="http://endunham.com/web_test/wp-content/photo-imgs/comingsoon500px.gif" alt="coming soon" />'); ?>
    
    <?php endif; ?>
    
    <div style="margin: 10px 0 10px 0"><?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?></div>
    <div class="categorynav"><a href="http://endunham.com/web_test/?page_id=3">Back</a></div>
    <?php get_footer(); ?>
    

    Here's my CSS for the particular page:

    #content div.cathead h3 a {text-decoration: none; margin: 0 auto 0 10px; padding: 0;}
    #content div.cathead p {margin: 0 auto 5px 20px; padding: 0; line-height: 100%;}
    #content div.categorypost {width: 500px; padding: 0; margin: 0; margin-left: 50px;}
    
    #content div.categorypost div.categorylist {float: left; display: block;
        width: 250px; height: 280px; text-align: center; padding: 0; margin: 0 ;}
    #content div.categorypost div.categorylist p {width: 250px;}
    #content div.categorypost div.categorylist a {width: 250px; text-decoration: none;
        text-align: center; font-size: 82%; margin:0; padding: 0;}
    #content div.categorypost div.clearing {clear: both; }

    Thank you,

  2. Doodlebee
    Member
    Posted 7 years ago #

    First off - you should *never* post that much code. Use pastebin.

    Second, your categorypost div is 500px wide.

    your categorylist divs are 250px wide. IE adds 3pixels to floated items (IE 3 pixel bug), therefore, your categorylist divs are 253px wide in IE6. Which means 253+253=506px - too wide to fit into the allowed 500px.

    That's your problem. Either change the width of categorylist to 450px, or change the categorylist divs to 240px. I'm allowing for some extra moving room there. Id your images or anythign have padding to them, this will also contribute, because IE *adds* the padding to the width, while everyone else subtracts it.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.