Firefox vs. IE problems - Expert Advice Needed

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.

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.

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.

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

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?

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

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

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.

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))?

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 & 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 //-->

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!

Aha! I knew it! I figured it had to do with the empty divs. :D 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):

Thanks again for your expertise!

Hi there,

This thread was created a while back but I am hoping that there is help at hand.

My website www.fratelli.com.au works well on FF and Chrome however IE7 (it's the only version I've tried) doesn't show any main page data. I've scoured the web to find similar examples of this type of problem and subsequently, as a last resort, I am posting in the hope of finding some Expert Advice.

@six.ten

A quick validation of your home page reveals 4 errors. They show that your video isn't embedded properly, in particular the object wrapper is incomplete and the parameter tags that would be inside it were it closed, aren't themselves closed. Nor is there an embed tag, which is what IE prefers anyway.

If you take a look at the code for embedding any YouTube video, you'll see a robust model to copy.

Hi,

I hope there's still help for this thread...

I'm also having Internet Explorer problems with my links.

After playing around to style existing links and new ones, some links don't display properly in Internet Explorer yet show fine in Chrome and Firefox. Granted, at first even in Chrome, certain links that I hadn't even touched had their styling properties changed, but after assigning them individual link styles (instead of referring back to the link styles in the parent element) they now show up fine, even in Internet Explorer.

However, now other links whose styling properties I also haven't touched, are not displaying as they should. It almost seems as if they are somehow inheriting some styling properties of other links.

I don't know if I messed up in CSS (I can't discover any problems, but I'm very new to CSS) or if there is something else that's over my head.

The link to my website is: http://imuniforms.com

If you open it in Internet Explorer, you'll see that in clicking on any of the featured products, the links will gain a background color and spacing issues. Same goes for the links in the left box under Information.

Please....plenty of potential customers will still use Internet Explorer :no:

Can somebody help me?

A grateful zencarter

In your stylesheet.css at line 362 there is a semicolon to many and a #

#contactus a:hover {font-weight:bold; color:##338BAF;; font-size: 20px; font-style:oblique;}

line 561 there should not be a space between 925 and px
line 1049 15px 0 15px; 0; should be 15px 0 15px 0;
line 1053 and 1057 15px 0 20px; 0; should be 15px 0 20px 0;

Thanks so much for the reply!

I am very new to CSS, but still, I thought I had combed over the stylesheet more carefully than that! :blush:

I think I fixed the CSS you addressed (but you never know!), but the problem still exists in Internet Explorer.

Any more advice?

Again, Thanks!

I think I found the problem.

In you stylesheet you are declared multiple times a a:visited

like on line 392

#shoppingcartimage a:link, a:visited {
background-color: #19283D;
width: 65px;
height: 29px;
display:block;
padding-left: 5px;
padding-top: 5px; color:#FFFFFF;
}

I think you meant this to be

#shoppingcartimage a:link, #shoppingcartimage a:visited {
background-color: #19283D;
width: 65px;
height: 29px;
display:block;
padding-left: 5px;
padding-top: 5px; color:#FFFFFF;
}

also check line 420 and 445

It works!

And a lesson learned....a little more attention to CSS rules.

Can't thank you enough!

A very, very grateful zenner

You're welcome.

For future editing, I recommend to use topstyle css editor, very easy to use and to check your css. And the firebug add-on for Firefox

I had considered asking about some kind of editor.

I will definitely try those!

Hi, i hope You will help me as well.

Today i discovered that top part of my site is messed op on explorer. Mainly logo and top nav bar. Can anyone have a look, please?

The site is: http://www.artelingerie.co.uk/

Cheers