{"id":195,"date":"2006-10-23T00:55:34","date_gmt":"2006-10-22T22:55:34","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2006\/10\/23\/ie-7-quirks-round-one\/"},"modified":"2009-04-14T07:18:52","modified_gmt":"2009-04-14T06:18:52","slug":"ie-7-quirks-round-one","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2006\/10\/23\/ie-7-quirks-round-one\/","title":{"rendered":"IE 7 quirks, round one"},"content":{"rendered":"

\"Internet<\/a> First of all, from this few first days testing it, Internet Explorer<\/a> in it\u2019s last reincarnation is much better browser than I thought it\u2019d ever be. It\u2019s 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.<\/p>\n

Order of typefaces in font-family<\/h3>\n

Specifying fonts in font-family<\/code> in the (unexplainable) wrong order, makes browser render the ugliest text you\u2019ve ever seen, even if a user has properly installed font (in this case Helvetica):<\/p>\n

body { font-family: Helvetica, Arial, sans-serif; }<\/pre>\n
Instead, one should set font-family<\/code> rule with Arial preceding Helvetica. What is the reason behind this, I really can\u2019t tell, but I don\u2019t like it.<\/p>\n
Width in Ems<\/h3>\n
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<\/a>).<\/p>\n
Let\u2019s take a look at hr-netiquette.org<\/a>. 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<\/code> font size is reset to 10 pixels, 65.2em<\/code> is equivalent to 652px<\/code>.<\/p>\n
In Internet Explorer 6.0 and now in 7.0 too, 65.2em<\/code> renders as 648px<\/code>, so the conditional comments stylesheet is applied with the rule that overrides it with 65.6em<\/code>.<\/p>\n
Generally, to translate em width for IE, multiply it by 1,007<\/strong>, but you can also PrntScr<\/key> and paste in PhotoShop and increment accordingly, if you\u2019re aiming for maximum precision.<\/p>\n
Image height<\/h3>\n
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.<\/p>\n
The workaround is simple – set height attribute in HTML or height property in CSS for content images.<\/p>\n
More to come?<\/h3>\n
Sure. But we\u2019re ready!<\/p>\n","protected":false},"excerpt":{"rendered":"
IE 7 rendering engine weirdness<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/195"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=195"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/195\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=195"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}