Firefox vs. IE problems - Expert Advice Needed

[voltage]

I have been learning the ins and outs of stylesheet based layouts and customizing my shop all week. Today I flipped over to IE and I noticed a few problems that I can 't resolve.

Here is the site http://www.Fashionettes.com

All of my problems are spacing problems, and I'm sure they all are caused by the same type of coding problem.

1. The Space between the logo and the tabs in the header
2. The Space below the tabs in the header
3. The space below the search header
4. The repeat of the sidebox footer

I have played with it and tweeked it for hours, and it doesn't want to budge.

[kuroi]

This may have absolutely nothing to do with your rendering problems, or it be the oscure root cause (I'm an optimist at heart). Either way I recommend fixing it and then looking again at the page ...

There is a coding error in (I suspect) your modules/more_information.php file. I looks like you have cut and pasted a short segment of php code with php tags from elsewhere, but not taken account of already being in a php block.

I suspect you will understand this, so I won't spell it out. But if it's not clear, post the code from your file (it's bvery short) and I'll show you how to correct it.

[kuroi]

OK. The php problem isn't the source of your rendering issues. That was hopelessly optimistic.

Instead there are two issues that are probably causing them. The sidebox footer issue (and BTW you could have attached the background image to the left and rightBoxContainer divs and used background-position:bottom to align it to the bottom of the div) is probably because you have styled it using the following invalid CSS

.sidebox-footer, #searchbar-footer {

background-image: url(../images/sidebox/sidebox-footer.gif);
background-repeat: x-repeat;
height:6px

}

The highlighted line should read

background-repeat: repeat-x;

The other problems are, I suspect, because you are trying to fit too much into some of your divs. For example your mainWrapper div has a defined width in you CSS of 780px. But when I measure it on screen, it comes out to over 800px in both FF and IE. So its contents are forcing it wider than it is told to be and I suspect that FF is simply coping better than IE. I would look at the amount of padding, margins and borders that you are adding and ensure that you understand how the CSS box model calculates box widths from them.

[voltage]

Kuroi, thank you for your help. I can't believe that I missed the x-repeat dislexic move on my part .

As far as the mainwrapper div being too short, unfortunately this is not the problem. You have a good eye and it is only 780px, but I dropped a table around the outside of my entire shop in the tpl_main_page, added 3 <td> elements, with the middle containing all of the shop code, and the outer two with the shop borders. This was the best way I could come up with, although I'm sure there is probably a more efficient way to do it with css.

So I'm stumped (like I said, I'm a beginner with much of this css stuff). Curiosly the three spaces all fall directly under div that are doing the same thing with essentially the same coding pattern.

For example, the very top space is right below the <div> whose sole purpose is to house the image for the top of the tabs (the header navigation):

#navTab {
height:20px;
width:780px;
float:left;
background-image: url(../images/header/header-tab-background.gif);
background-repeat: repeat-x;}

What shows up on the html side is:

<div class="navTab-top"></div>

The others do the same thing

#navTab-bottom {
background-image: url(../images/header/header-tab-bottom.gif);
background-repeat: repeat-x;
height:8px;
width:780px;
float:left;}

<div id="navTab-bottom"></div>

#search-bg {
background-image: url(../images/search-bg.gif);
background-repeat: repeat-x;
height:30px;
width:780px;
float:left;}

<div id="search-bg"></div>

Is this an incorrect way to code?

[voltage]

A dirty fix for the top two tabs is an IE conditional statement:

<!--[if IE]>
<style>
.navTab-top{margin-bottom:-7px;}
#navTab-bottom{margin-bottom:-5px;}
</style>
<![endif]-->

But for whatever reason this won't work with the space directly below the search_header bar.

[kuroi]

I'm rapidly losing count of the number of times that I've advised people so slip in a negative margin to deal with whitespace in IE. At least you've had the good garce to accompany it with a conditional statement.

Don't go blaming yourself as a relative newcomer to CSS either. If it works properly in FF then there's at least an evens chance you're right and IE's wrong.

Here you have a nice little collection of IE Whitespace bugs. Don't let them get too close to each other, we don't want them breeding.

Here is a blog you may find helpful. Gives one solution and then other people pitch in with several others. I'm sure you'll be salivating now at the prospect of a Saturday evening spent experimenting with fixes to IE bugs.

P.S. Don't forget to sort out the php coding problem. It prevents the validators from even trying to valiadate your HTML or CSS and so may be masking other issues.

[voltage]

Thanks for the link. I'll look into it and see if I can fix the problem, and thanks for your help.

One last question: what is the php coding problem you are referring to? (can you show me the code (the html code that you are seeing))?

[kuroi]

It's the one explained in my first post which you can see in action by trying to click on anything in your Store Policies box. Here's the HTML

<!--// bof: information2 //-->
<div class="leftBoxContainer" id="information2" style="width: 175px">
<h3 class="leftBoxHeading" id="information2Heading">Store Policies</h3>
<div id="ezpagesContent">
<ul style="margin: 0; padding: 0; list-style-type: none;">
<li><div class="betterCategories"><a href="<?php echo zen_href_link(FILENAME_SHIPPING, '', 'SSL'); ?>"><img src="includes/templates/Custom/images/cat_right_arrow.gif" alt="" width="20" height="15" />Shipping &amp; Returns</a></div></li>
<li><div class="betterCategories"><a href="<?php echo zen_href_link(FILENAME_PRIVACY, '', 'SSL'); ?>"><img src="includes/templates/Custom/images/cat_right_arrow.gif" alt="" width="20" height="15" />Privacy Policy</a></div></li>
<li><div class="betterCategories"><a href="<?php echo zen_href_link(FILENAME_CONDITIONS, '', 'SSL'); ?>"><img src="includes/templates/Custom/images/cat_right_arrow.gif" alt="" width="20" height="15" />Conditions</a></div></li>
<li><div class="betterCategories"><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'SSL'); ?>"><img src="includes/templates/Custom/images/cat_right_arrow.gif" alt="" width="20" height="15" />Contact Us</a></div></li>
<li><div class="betterCategories"><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'SSL'); ?>"><img src="includes/templates/Custom/images/cat_right_arrow.gif" alt="" width="20" height="15" />Newsletter Unsubscribe</a></div></li>
</ul>
</div></div><div class="sidebox-footer"></div>
<!--// eof: information2 //-->

[kuroi]

BTW As a result of just debugging a more straightforward site for somebody else on the forum with the same whitespace problem, the penny dropped that it was linked to empty divs to which IE was erroneously assigning physical space.

As a result I'm pretty sure that is you use the following CSS anywhere in your stylesheet, the white bar below search will disappear

#navMainWrapper {display:none}

This is completely cross browser compatible since the div shouldn't be being displayed in the first place!

[voltage]

Aha! I knew it! I figured it had to do with the empty divs. Thanks for the help. I used your little code and it solved the problem with the last space. The other two spaces were still there which I fixed with negative margins. I had to put the display:none tag into a conditional IE statement, otherwise it broke the site in firefox. Here is the final code which I put at the bottom of html_header (just in case anyone else is following this):

<!--[if IE]>
<style>
.navTab-top{margin-bottom:-7px;}
#navTab-bottom{margin-bottom:-5px;}
#navMainWrapper {display:none}
</style>
<![endif]-->

Thanks again for your expertise!