Looking for advice on testing CSS for older versions of IE.

[bluebomber]

Hello, I've recently gotten a fairly good grasp of writing HTML and CSS for IE8, Chrome, Firefox and Safari,I now want to start looking into creating separate style sheets for IE6 and IE7.I understand how to go about creating separate CSS files that are only read by previous versions of IE - but I'm having difficulty in actually trying to obtain information about the quirks \ issues \ bugs that these iterations of IE tend to have with their interpretation of CSS - I've seen websites that list tables showing a very brief overview of what is and what isn't supported - but what I'm really after are the small nitty gritty bits - the stuff where widths aren't interpreted correctly and that kind of thing.Unfortunately the mistake I've made this time round (and I know this is a school boy error) is I've finished a complete website only then to check it on IE7 for the first time to find it doesn't work (I won't make this mistake again) - but the issue I'm having isn't that the layout looks wrong, it's that a javascript induced fullscreen fixed div which should fade in with an opacity change - simply never appears - I get the feeling it could be quite a lengthy process trying to narrow down why this doesn't work - as it might not even be CSS and could be a problem with my javascript.Also does anyone have advice for quick and efficient (and free) ways of testing your sites in different versions of ie? - I'm running Vista on a laptop and I understand this may limit my options somewhat.I've noticed in IE8 I can seemingly simulate IE7 behaviour using the developer tools - assuming I've understood that correctly it would just be IE6 that would needed separate testing.Thanks for taking the time to read, any help would be appreciated.

[thescientist]

The best way to keep browsers from running in quirks mode is to have a Strict DTD on your page, and using the universal selector to reset the margin's and padding for all elements. Creating separate stylesheets for multiple IE version's is less than ideal. Almost all problems have a cross browser compatible solution. IE8 does include a developers toolbar for running IE7 or IE8. If you want to run separate instances of each browser (say IE6), you might want to consider using a virtual machine specifically for running that browser. One way to test your site is to validate it for HTML/CSS errors, and have your error console open when testing javascript to see if there are any error there as well. If you had a link to your site with specific problems cited then we could help you break down the issues to specific fixes.

[bluebomber]

Hello thescientist - I should have known you were likely to reply :)the site in question is www.alkchan.com - it's fine in most modern browsers and IE8 - clicking on any of the thumbnails in the first 3 pages fails to bring up the javascript controlled CSS imageviewer when I tried it in IE7.I've yet to have a look at IE6.I'm still learning about the page type decelerations - I think I'm using XHTML transitional at the moment.I haven't reduced padding and margins with a universal selector but I have had a habit of removing them from the body (I think).

[jeffman]

I personally ignore IE6 most of the time. I run IE7 on a separate computer and test all my documents on that version first. Then I check IE8. I find that if a page works in IE7 and Firefox, it requires very few changes (usually none) to work in IE8. Sometimes IE8 enforces the rules more strictly.

[bluebomber]

Well after doing a quick validation test, I have a ton of errors, admittedly though most of them are just to do with the fact my images do not have an "alt" attribute.No idea why my image viewer doesn't work on ie7.

[dsonesuk]

I think, if i remember from previous posts, that it was mentioned that display='table'; is not supported below IE8 and since the IE7 warning states 'could not get display property' this might be the cause of the problem.

unction getplacesImgSrc(anchor) {   var image = anchor.getElementsByTagName('img')[0];   var imgSrc = image.src;   var stringsplit = imgSrc.split("/");document.images["display"].src = "photoplaces/"+stringsplit[stringsplit.length-1];document.getElementById('black').style.display='table';var secondsplit = stringsplit[stringsplit.length-1].split(".");number = parseInt(secondsplit[0]);folder = "photoplaces/";fadein();}function getpeopleImgSrc(anchor) {   var image = anchor.getElementsByTagName('img')[0];   var imgSrc = image.src;   var stringsplit = imgSrc.split("/");document.images["display"].src = "photopeople/"+stringsplit[stringsplit.length-1];document.getElementById('black').style.display='table';var secondsplit = stringsplit[stringsplit.length-1].split(".");number = parseInt(secondsplit[0]);folder = "photopeople/";fadein();}function getautoImgSrc(anchor) {   var image = anchor.getElementsByTagName('img')[0];   var imgSrc = image.src;   var stringsplit = imgSrc.split("/");document.images["display"].src = "photoauto/"+stringsplit[stringsplit.length-1];document.getElementById('black').style.display='table';var secondsplit = stringsplit[stringsplit.length-1].split(".");number = parseInt(secondsplit[0]);folder = "photoauto/";fadein();}