According to the IE blog, Internet Explorer 8 has passed the Acid test.
For those of you unaware, the Acid test is a pretty standardized test given to browsers to determine how compliant they are with W3C standards. It basically uses funky CSS to expect the browser to properly interpret what should be rendered and how. If rendered properly, you get a smiley face. When I last checked, Safari for Windows had the best face.
The image of the graphic given to IE8 was perfect.
Sitepoint.com recently published a somewhat anti-climatic article espousing the CSS shortcomings of IE7, more than a year after the product was launched, and about two years after IE7’s beta was released for testing.
I can’t help but feel that some of this frustration aimed at Microsoft is unfair. The developers of IE7 have always stated that CSS2 support was their goal but also that IE7 would never pass the Acid test.
IE7 fixed the bugs we bitched about the most: Peekaboo, double-floating margin, box model, PNG support, etc. Apparently they even visited positioniseverything.net to get the real deal scoop on what geeks were complaining about. (Perhaps if we’d been more united in our call for standards-compliance, they might have listened, but that’s another story.)
Read the rest of this entry »
Unless you’ve been residing under a fairly large rock for the past seven years, you should be well-aware that Internet Explorer 5.5 and 6 do not provide native support for PNG rendering. To get IE to play nice, you need to apply Microsoft’s proprietary AlphaImageLoader Filter to the element rendering the PNG while at the same time ensuring IE doesn’t see any “background-image” properties that you’d want other standards-compliant browsers to see.
Read the rest of this entry »
Try using { display: inline-block; }:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; }
.clearfix { display: block; }
A nifty way to use CSS to preload images (from specere.net):
#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
#preloadedImages then gets added after body. Especially good for page-specific style sheets.
