Modified Categories Tab showing incorrectly in IE7

[shocker]

the site: Nahid Fashions

I've moved the category tab to the location of the Tag line.

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

    <!-- SA 07-26-07 moved optional categories tabs here -->    
    <!--bof-optional categories tabs navigation display-->
    <?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
    <!--eof-optional categories tabs navigation display-->

</div>
<br class="clearBoth" />
<!--eof-branding display-->
<!--eof-header logo and navigation display-->

<!-- SA 07-26-07 moved tagline from inside the logoWrappr -->    
<!--bof- tagline and banners -->
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
<!--eof- tagline and banners -->

the navCatTabsWrapper has a clear:right set in the CSS.

#navCatTabsWrapper {
width:50%; float:right;
height: auto;
clear:right;
}

Everything is fine FF and IE6, but IE7 doesn't appear to take the clear:right into account.

anyone have any idea how to fix this?

SA

[kobra]

I am not where I have IE7 right now but this is one of those IE quirks that they are so famous for...in how they handle the combined float and clear elements. You should be able to google this and find solutions for IE

Secondary, as you still have "Powered by Zen Cart" in the footer - You might consider adding this to the Showcase - and the link will assist your ranking anyway

Nice Site!!

[brandtim]

It appears to me that the IE7 problem is not related to #navCatTabsWrapper's clear:right ... that div does not have any right floated elements above it so there's no clearing to do....

Rather, I think it's the #logoWrapper's height:75px that's doing it. Comment out that line and see what happens. It seems that IE7 is restraining the #logoWrapper box to 75px even though the contents exceed that size (amazingly, correct behavior).

IE7 is not, however, honoring the clearing br after #logoWrapper ... presumably because the floated contents overflow the div ... FF is honoring the br and so correctly pushes the br and the tagline below the bottom of the #navCatTabsWrapper.

Thus, in IE7 the first element after #logoWrapper (effectively, the tagline) is at 75px from the top of the #logoWrapper .... which puts it under the floated elements.

This bug in IE7 of not clearing elements after floated elements which exceed their container is a new one to me.

BrandTim

[shocker]

I have been looking on the web. I've even corrected this problem in another project with the following css code.

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0px ; 
    clear: both; 
    visibility: hidden;}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

for this to work, I've added class="clearfix" to the navCatTabsWrapper div. Usually the problem is with IE6, but in this case IE7 is still broken.

I'll add my site to the showcase shortly.

thanks again

[shocker]

Thanks brandtim. Good catch. I had glossed over the height property since it was displaying in 2 of the 3 browsers I'm testing with.

I was on a wild goose chase there for awhile. I thought I have accounted for the combined float and clear elements.

Thanks again.

[Hyena]

WOWOWOOWWW It works!

Thank you Shoker you are my savior.

I just want to precise for adding the class="clearfix" i did it in module_cat_tabs

Now I have another problem with the size of my background but it should be easier to fix than the IE7 bug...I hope...

[Hyena]

oh whatever...I found the problem: I had left out the second part
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */