Finished tutorial does not work in IE6

Hi,

The completed html file that comes with the CSS Photoshop tutorial and which is located at PATH\CCS4PS\Completed Files\CSS Designer Layout.htm does not work correctly in IE6.

Specifically the content div starts below and to the right of the sidebar div instead of starting at the same vertical position as the sidebar div. This happens if the files are local or uploaded to a server.

Also something else curious happens only when uploaded to a linux server. All versions of IE but not Firefox stop displaying the colored nav squares. In addition, the footer text bleeds out of the wrapper to the left. Below are unaltered originals from your download. The index file is there in case the spaces in the original file cause a problem but it's a copy of the oringinal and these files were never opened in Dreamweaver.
CSS%20Designer%20Layout.htm
index.html

Could somebody explain what causes these errors?

thanks

-paul

The cause of error like you are describing are because different browsers have different means of interpreting CSS.

Firefox and Safari (while have a few minor differences) are standards based - meaning they comply with w3c rules. IE, on the other hand, has been horrible about following anything standards based. However, IE8 has made great strides and is, now, much closer to the aforementioned Firefox and Safari.

But, there was a huge discrepancy in how IE6 handled elements and compared to IE7 through IE8. IE7 was a like a leap forward for Microsoft in that their browser finally at least appeared much closer to the standards based browsers but still wasn't quite there. IE 6 had not only the issue of lacking standards based interpretation, it was always riddled with bugs. So not only were alterations ti CSS required, downright hacks have to be used to get it to truly display correctly on some elements.

So, now on any site I create, I first attach my main css file. Then begin to check for differences in each browser. I usually have to create a an IE conditional statement for IE 7 and attach an a style sheet that will just contain alterations to styles that were previously listed in my main style sheet to fix and small inconsistencies with IE 7. And then finally, I always have to add a conditional IE 6 statement with CSS just for IE 6. Sometimes, with IE 6, I have to make drastic changes to the CSS to get it to look right.

Cheers,

Brian

Brian,

Many thanks for your reply. Having a conditional statement for IE6 certainly sounds like good practice.

I'd like to understand from the tutorial authors what causes the specific issues I raised in my original post.


thx

-paul

The differences that you see in IE6 are just due to rendering differences for the various browsers out there. The tutorial is not necessarily intended to show you how to create a page or layout that is working with all browser versions, it is to show you the process for using and manipulating css to create the layouts.

I think that you could adjust the css of the layout to have it display correctly in IE6 using some conditional comments. What exactly you would need to adjust though I'm not sure. It looks like some of the elements may just be too wide to have both side by side you adjusting the width of either region would be a good place to start.