I'm close to make the decision of ignoring IE6 for the most part when it comes to evaluating crossbrowser compatibility of the website I'm designing at http://www.mzproperty.com/mztest/ The reason you can guess. But while I've been striving to make it compatible with a lot of pain, google searching and recently my coming to these forums, I only have about 3 months of HTML and CSS hobbyist study. The current website breaks under IE6 on Best Offers page only, due to a IE6 padding bug (I gathered that much) that forces the contents down in the page as if I had a very high css:top-margin. However, while tracking yet another IE6 bug, I realize IE6 margin and padding bugs are so numerous and have so many implications, I've finally decided to scrap this browser from my list. It's just to much to ask me at this point and the hacks needed are already are so numerous and dispersed throughout the css, they hinder future maintenance of the website. Ok... here is where I need your help: The website is designed for accessibility, simplicity, and no javascript or other fluff, with an emphasis on accessibility. The target is middle-high to high income British citizens. Being that the case, I'm taking the liberty of assuming three things: Disabled people don't use IE6 due exactly to the known rendering problems and to the reading aid software they employ working better on different browsers or newer versions of IE. They also enjoy 3rd party help in keeping their computer software up to date. Microsoft Updates covered a large spectrum of the user base by now and it is safe to assume only a very small number of users still uses IE6 on a daily basis. These users are not technology oriented, are used to the poor rendering and can still read the website. Any exceptions to this fall into a non representative margin of the website target population, which should not damage business. How do you evaluate my decision? Just for a little more information, this is a jointly owned business in which I was chosen to develop the website due to my programming career background.
The website currently validates for CSS 2.1, HTML 4.01 T, Section 508 and WAI. I'm only missing an evaluation for color choices and general readability for poor-sighted users. I've downloaded Thunder and a demo of JAWS and was pleased with both results when it comes to screen reading software.
Hi, I don't know how reliable or accurate these stats are ... http://www.w3schools.com/browsers/browsers_stats.asp but according to these IE6 has a 32% share of the browser market in January 2008. If someone else has some other stats then please share. I've looked at your site and it looked OK in IE6?
Even wealthy disabled people aren't necessarily going to update their OS's just so they can use IE7. JAWS works via whatever browser Windows has, and that's what people will use. (Same goes for MAGic). Anyone still hanging on to their Windows 98 or 2000 simply cannot update. The rest are apparently lazy or simply don't see any reason to update. M$ had a planned automatic update to bring IE6 to IE7-- according to everyone's stats (which are never 100% valid of course), IE6 use has not dropped. Our own stats show at least 60% using IE6. Now, I think my country is a bit behind everyone else as far as FF use and whatnot, so it's likely not SO high in GB, but still... that's too large a population to say "screw you" too. See, they don't ever blame the browser-- they blame the site. Always : ) Anyway, the problem I see on IE6 looks like float drop. In IE6 even the left border is covered by the map and property search. One thing IE6 does is increase the width of stuff if it needs to to accomodate text (it will wrap text, but not one word) *edit but that's not what's going on here* There are a few ways to get rid of this, depending on the cause. Since it seems to only be happening on the Best Offers page, I'm thinking it has to do with the house images... ah here: .item { float: left; width: 26em; padding: 0; padding-bottom: .5em; border: 1px solid #FFA261; margin: 1em 2em 1em 0em; } You've set a width and some margins. Very popular IE6 bug: doubling your margins on float. Adding display: inline on .item would likely get rid of the problem. Smart browsers, including IE7 here, ignore it because they know a float is automatically a block. But IE6 removes the double margins. Weird. For only playing around with HTML and CSS for three months, you're damn good. For some nice info on FLOATS, check this thread out: http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15 I've got it bookmarked because I refer to it so much. I think you should try to support 6. It's just too popular, and like I said, visitors never blame the browser, only the site.
Thanks for the info Stomme. CSS was not a complete surprise to me since the principles are very similar to a script language I used many years ago to program in LightShip. Meanwhile the W3C website along with a book I bought have both become invaluable as learning tools throughout this time. Not to mention the web. I have dabbled before in HTML and CSS only to a minimum extent. So I was not entirely in the black when I started. Meanwhile I'll investigate your suggestions further. The one thing I realized with IE6 margin and padding bugs is that they have so many implications that trying to find the IE6 hack for your specific problem is a daunting task. I've seen all sorts of problems while searching through google just because of these cssadding and css:margin. As for the usage statistics. Didn't occur to me to look for that before this thread. I now did on several sites, using wikipedia's Usage_share_of_web_browsers as a starting point. And my heart fell! Despite we having to look at these with a very critical mind, there is no doubt that IE6 still prevails as the dominant browser.
While IE6 has innumerable bugs, some of which even scare me when I read about them, the majority of problems fortunately fall under a few "big" ones. So, generally, it's not that hard to accomodate it. I do more work going around things like PNG support than actual bug fixes... and I have more CSS code setting haslayout than anything else. Another option (which can be kindof fun though it will grossly increase your CSS: ) is to have two styles for IE without 2 stylesheets, using a CSS signature. Check out this page, called "Gemination" by Egor Kloos: http://www.csszengarden.com/062 in both IE6 (find someone who has it since I think you don't yet) and some other browser. Neat, huh? I tried the same thing with what will be my company's new website. I was doing my usual hacks around IE6, mostly for its lack of support for min and max width, semi-transparent PNGs, heights etc when I thought of preserving the "old" (read: current) crappy style. So since IE6 is so retarded (held back) with combinators and attribute selectors, I redid the old design as well has having a new design for more compliant browsers. http://stommepoes.nl/Guis/guis.html Hehe, css: http://stommepoes.nl/Guis/guis.css
Oh. Yes, I do know the Zen Garden for some time. Stumbled upon it when reading an article on yet another most excellent source: A List Apart. The concept behind the Zen Garden is, in my opinion, the archetype of good XHTML/CSS design; i.e. good semantics. However, I still have a lot of reading to do - and experience to accumulate - before I can hope attempting anything similar. That's where I feel I need to study further; the power of good semantics and how each XHTML element relates to each other in terms of their semantic meaning. Meanwhile your work is beautiful. I love the simplicity in design and color choices. You'll probably find this funny, but I always felt sans-serif fonts looked great with Nordic and German languages. Just don't ask me why. You mind if I keep your css for further study? I want to take a look at some of the hacks I noticed there and I didn't know about yet. Oh... and I fixed the IE6 bug. Yet again with your help. display:inline did the trick. EDIT: Oh, I did install MIE when you first mentioned it. Have been using it to test for IE6 compatibility since browsershots is indeed a notable effort, but one I'm afraid will fall short of its objectives. However, I wonder; I seem to have noticed that it dowsn't work so well if I open IE6 when IE7 is running. I have the distinct impression it then renders with the IE7 engine. I can further test this by disabling my cache , changing css, and such. But if you have a quicker answer, let me know if this is indeed the case.
Actually (and I feel like a turd for saying this, but the makers admit it) the CSS Zen Garden actually kinda sucks semantically-- not really bad or anything, but they were trying to make the HTML as flexible as possible, so it's actually quite bloated... there are classes on things that normally wouldn't etc. I suggest getting the book they made about the Zen Garden... the first half is mostly design stuff (and a whole chapter on Typography! which is great), but the second half goes into some CSS "hacks" and ways different designers got around IE6 etc. It's brilliant what some of these guys do. It's called... uh... the Zen of Css Design by Dave Shea and Molly Holzschlag (did I spell her name right?). The main trick I did was the CSS signature. The body has an id in the HTML. The css refers to the title by using attribute tags (read this: http://www.communitymx.com/content/article.cfm?cid=1C603 it's interesting) so basically IE6 doesn't support them and I can use body[id=whatever] #nameofdiv {stuff;} and IE6 will never see it : ) *Edit, MSIE6... it depends on which one you installed, and on what machine. There are some at evolt which still have some of the same renderings as IE7. The Tredosoft IEs don't have this problem. Still, they really cannot be used like a native IE6 for testing such things as scripts (Javascript) or Flash. There is a page, I'll try to find it... XP had that Service Pack 2 update and it kinda f*cked with IE6... and someone found the solution, but I have to find that site again... it was like hobbit something.
Don't. I'm conscious enough of my yet limited knowledge on these matters to easily reevaluate my own preaching This one: http://tredosoft.com/Multiple_IE Installed on a XP SP2 machine. I have to say you shouldn't worry much about it. I was just wondering if you had a quick answer. I can easily test this myself.
Easy test: IE7 ignores the Holly hack just like other browsers. Only IE6 sees it. Set something, like a background colour on something. #div { background-color: #f00; } Then set a different one with the Holly (star or Tan) hack: * html #div { background-color: #0f0; } There must be a space between the star and the "html". If the thing is green, IE6 is rendering as IE6 : )