IE 7 quirks, round one
First of all, from this few first days testing it, Internet Explorer in it’s last reincarnation is much better browser than I thought it’d ever be. It’s still not the first class piece of software, but at least most of the real-life CSS issues have been fixed. However, there are still a few nasties.
Order of typefaces in font-family
Specifying fonts in font-family in the (unexplainable) wrong order, makes browser render the ugliest text you’ve ever seen, even if a user has properly installed font (in this case Helvetica):
body { font-family: Helvetica, Arial, sans-serif; }
Instead, one should set font-family rule with Arial preceding Helvetica. What is the reason behind this, I really can’t tell, but I don’t like it.
Width in Ems
Element width set in ems still renders pretty wierd, which can be trouble if your layout requires zoom flexibility (IE 7 has native zoom rendering functionality similar to Opera).
Let’s take a look at hr-netiquette.org. Try resizing text – the page should zoom in and out. This is accomplished by setting width in ems (65.2 ems to be precise) for the main wrapping division. Since the body font size is reset to 10 pixels, 65.2em is equivalent to 652px.
In Internet Explorer 6.0 and now in 7.0 too, 65.2em renders as 648px, so the conditional comments stylesheet is applied with the rule that overrides it with 65.6em.
Generally, to translate em width for IE, multiply it by 1,007, but you can also
Image height
Content images without explicitly set height property (or corresponding element attribute) will cause footer to stay in the position where it was rendered initially, before all the images were loaded. This is well known bug in Firefox, here it comes with IE 7, too.
The workaround is simple – set height attribute in HTML or height property in CSS for content images.
More to come?
Sure. But we’re ready!