IE8 vs FF Rendering Differences at Higher Resolutions?

Hello, all.

I developed my site on a 4:3 monitor at 1280x1024 resolution. I use Firefox, although I also checked the site with IE8 on the same PC to verify that the layout looked the same, which it did.

Today, I checked the site from another PC having a widescreen monitor running at higher resolution. It rendered fine from within Firefox, but when I tried IE8, my centerbox content (categories and banner) extended to the right just far enough to fall outside the centerbox edge (my site design has no right column).

Site is at g a d g e t f a n c y <dot> c o m.

Any ideas?

Thanks,
-DBB1

I've got a 1920 x 1080 monitor, and it looks fine in FireFox and IE8, but shows the symptoms you describe in IE7. You're the victim of the IE7 "empty text node" issue. Try googling 'ie7 empty text node' for solutions.

Still no luck with this, or finding anything with empty text node solutions that might apply.

I've discovered that IE8 doesn't render the site properly, regardless of the resolution my widescreen monitor/display is set to - low resolutions render incorrectly, too.

So the differences that I can discern at this point is:

• FF and IE8 running on XP SP3 @ 32bit renders the site correctly.

• FF on Win7 @64 bit renders the site correctly; IE8 on this platform does not.

I've played with different doc types in the HTML header, and also with compatibility mode in IE8, but no luck.

Any specifics that I should be looking for?

Thanks,
DBB1

Anyone?

Looks like the layout issue may be increasing the width of the left column, which causes the centerbox contents to push out to the right of the centerbox container. Obviously, the width values in CSS has not changed any...

I'm stymied by this, and hope someone can shed some light or be able to assist.

Thanks,
-DBB1

It looks fine here in IE8 (XP) and FF. In IE7, the slideshow and the centercolumn (Departments) extend to the right outside mainWrapper, all at 1280X1024.

In IE6 at 1440X900, the slideshow extends to the right beyond mainWrapper, but not as far, and the centercolumn is OK.

I cant imagine any reason your OS would display something differently with the same browser, unless it's a different browser build.

If that were mine, I would create stylesheets for IE6 and IE7 and increase mainWrapper to, say 920px for IE7, and maybe 910 for IE6 an see what happens.

http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=493

div#slideshow {
background-color:#B1B1B1;
border:2px solid #B1B1B1;
margin-bottom:8px;
margin-left:9px;
margin-top:6px;
overflow:hidden;
padding:0;
position:relative;
z-index:5;
}

You have hard coded "width=668px" but in your CSS you have stated a 2px border all the way around.

2px border on left & right plus 668px = 772px

That is why, in IE, it sticks out 4px to the right.

Easiest probable solution is to resize your images to be 664px.

Also, you have the same problem with the center box and would need to make changes to CSS code, to the "centerbox" selector.

stevesh:

I cant imagine any reason your OS would display something differently with the same browser, unless it's a different browser build.

I did make an error on an earlier post; I'm running Windows7 on both platforms; I stated XP on the 32-bit platform, but it's Windows 7...

At any rate, the IE8 build number is the same for both the 32-bit and 64-bit platforms:

Win7, 32-bit: 8.0.7600.16385
Win7, 64-bit: 8.0.7600.16671

So only the sub-build number is different between the two. Interestingly, the 32-bit version I'm running (8.0.7600.16385) is the latest, according to a Microsoft KB article dated OCT 4, 2010 - the more recent 64-bit 8.0.7600.16671 version that's giving my layout fits is not even listed anywhere (and Windows Updates isn't touching my 32-bit version, so I have to assume it's versioned up as far as it can go).

stevesh:

If that were mine, I would create stylesheets for IE6 and IE7 and increase mainWrapper to, say 920px for IE7, and maybe 910 for IE6 an see what happens.

Not sure how to do this; I'm assuming it's accomplished with the contribution you referenced at http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=493? What a pain in the arse...! lol

-DBB1

Website Rob:

2px border on left & right plus 668px = 772px

That is why, in IE, it sticks out 4px to the right.

Easiest probable solution is to resize your images to be 664px

Thanks, Website Rob. I understand what you're saying about my math, but if that were the culprit, shouldn't I be seeing the same issues in Firefox and the "good" IE8 version?

And decreasing the width of my slideshow images would result in more whitespace when viewed with FF and the IE8 version that's rendering it correctly, wouldn't it?

Then there's the Categories content in the centerbox that's extending to the right, too.

There must be a carriage return, or something screwy in the left column that's causing it to appear to be wider in the "bad" IE8 version, that's pushing the centerbox contents to the right... I dunno... grasping for straws here.

I was getting real close to going live, but don't want to roll with something that doesn't look polished, even though most folks I've talked with say it lays out fine... but you and Stevesh both observed it.

I'm totally flummoxed.

-DBB1

Before dismissing a suggestion, would it not be prudent to give it a try?

You can easily do it for your Slider Header images by editting to:

<img width="664" height="267" alt="" src="images/shopnowmesh.jpg">

Then view the results in IE.

Website Rob:

Before dismissing a suggestion, would it not be prudent to give it a try?

I wasn't dismissing a suggestion - I'm grateful for any and all replies.

I was simply stating that it would stand to reason that any changes to fix it for one browser would also affect how the other (working) browsers would render the layout.

I did in fact try your suggestion, but had to take it way down to 650 or so to get it to fully pull inside the centerbox container. But as expected, it messed it up in FF and the other IE8 version that rendered it correctly.

Since then, I have had a bit of a eureka moment, in pondering through the comments ***lat9 ***and ***stevesh ***left:

The IE8 browser with the issue was running in compatibility mode - essentially acting as IE7 (or earlier - more research needed there). Unchecking the compatibility settings allows the browser to display sites using IE8's latest interpretation of web standards - when unchecked and allowed to run in pure IE8 mode, the site displayed normally!

So, I either have to figure out and address why IE7 fouls up (haven't yet turned up anything specific to lat9's comment about the "empty text node" issue, other than it's effect on XML), or go the separate CSS route that ***stevesh ***suggested, and widen the centerbox container for IE7 and earlier.

So it's not an IE8 problem...

-DBB1

stevesh:

If that were mine, I would create stylesheets for IE6 and IE7 and increase mainWrapper to, say 920px for IE7, and maybe 910 for IE6 an see what happens.

http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=493

Stevesh,

No luck incorporating the html_header code from the add-on module you recommended. There seems to have been changes to this file since the mod was released. Adding in the four code blocks that are supposed to pick up the IE6/IE7-specific css and jscript files breaks the site altogether.