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!
21 Comments
Could it be because Windows comes with Arial?
Comment (#) by Joshua Kendall — 23rd October 2006.
No, it makes no difference what order the font is specified, JK, the browser is supposed to ignore the fonts it cannot display and grab the first one it can.
It think what Marko is suggesting is that IE7 is messing with a long established CSS convention, whether intentional or not, and if it bears out I don’t much like it either. I find it inexcusable that Microsoft, with it’s multi-billion dollar development (appropriations) budget and a team as big as the IE team, can’t build a browser that works at least as good as Firefox, or even Opera.
Not a question of cannot, but will not–in my estimation. Microsoft continues to be the problem, not the solution.
Comment (#) by Ray — 23rd October 2006.
You know, it just occured to me… I once specified Helvetica before Arial and wondered why my site looked so awful. I had Photoshop open, so I pulled down the font list. I found Helvetica. For some reason, I connot remember how, why, or when, I had Helvetica on my PC and it rendered poorly. I sandboxed it and all is well.
I still believe Microsoft and their browser are the problem not the solution. But still… I supposed I ought to install 7. Now I just need a disposable PC to install it on *cough*.
Comment (#) by Ray — 23rd October 2006.
Yes, numerous developers are in search for a disposable machine these days. I have one in queue, will be available in a couple of days : )
Comment (#) by marko — 23rd October 2006.
Dobar Dan Marko!
To fix the IE font-family issue
can we not do body { font-family: “SomeFont", Helvetica, “Arial", sans-serif; }
Comment (#) by Johan — 23rd October 2006.
I am sorry … I meant for IE
body { font-family: Arial, “Helvetica", sans-serif; }
Comment (#) by Johan — 23rd October 2006.
Johan, that would be:
<style type="text/css">
/* <[CDATA[ */
selector { font-family: Helvetica, Arial, sans-serif; }
/* ]]> */
</style>
<!––[if IE 7]>
<style type="text/css">
selector { font-family: Arial, sans-serif; }
</style>
<![endif]––>
Comment (#) by marko — 24th October 2006.
You don’t need a disposable machine - there’s a standalone version of IE7 available here :)
Comment (#) by Mario — 24th October 2006.
Mario, it doesn’t work the same way. I understand the skepticism, but every serious developer should try it in the real environment.
Comment (#) by marko — 24th October 2006.
You could save yourself some cash by using VirtualPC which Microsoft no longer charges for. Your only out-of-pocket cost would be an XP license, assuming you don’t have a valid, uninstalled license already. I am setting up a VM for IE 6, so I can install IE 7 natively.
A bonus for those of you going down that route: Speed-up and usage tips for IE6 in VirtualPC.
Comment (#) by Alex Jones — 25th October 2006.
Hey, guys!
Instead of VirtualPC, you might want to check this: http://tredosoft.com/Multiple_IE
János
Comment (#) by János Pásztor — 25th October 2006.
Alex, thanks for the hat tip!
Comment (#) by marko — 25th October 2006.
János, I’ve used the multiple versions in the past (have them installed right now in fact - the geek in me had to include back to IE 3), but they can prove buggy causing crashes at the most inconvenient time and the conditional comments don’t always work.
marko, you’re quite welcome!
Comment (#) by Alex Jones — 25th October 2006.
Could it possible that IE7 renders the CSS font-family order in alphabetical order? If so, then back to the drawing board IE7 programmers.
Comment (#) by Henry Umansky — 26th October 2006.
I’m running rc1 as a standalone and I’m seeing some weird cursor behavior. On a div with a width and centered with margin auto the cursor is displaying ‘text’ instead of ‘default’ (arrow) when mousing over whitespace, adding a background property fixes this.
Has anyone else seen this?
Comment (#) by Stuart — 27th October 2006.
I’m a student at a Milwaukee WI (USA) area school. I had the pleasure to help redesign my college’s Web site. Once IE came out, we found only one issue with the underscore hack that I used on the unordered lists we had.
It get’s messed up. Take a look at the following page in IE7 vs. Firefox:
http://www.cc.edu/parents/
Point 1) I had no say in the decision to use tables :)
Point 2) I did have the chance to write some CSS for styling purposes. I used the following code to stylize the lists:
.listBoxed{
list-style-position: outside;
margin: 4px 0px 4px -23px;
_margin-left: 17px;
list-style-image:url(/images/bullet_boxed.gif);
text-indent: 0px;
line-height:1.5em;
}
It needed to be like that to work with IE6 and FF. But alas, now it looks like the undscore hack has been ‘fixed.’
What does that mean? Well, now we have to figure out a way to code that single spec to work across FF, IE6, and IE7 which all seem to treat it differently.
Comment (#) by Kris Gosser — 28th October 2006.
Kris,
Try the following:
.listBoxed {list-style: none;
padding-left: 20px;
background: url(/images/bullet_boxed.gif) no-repeat 0 center;
}
This way, you have total control over the position of the ‘bullet’.
Comment (#) by marko — 28th October 2006.
Marko: well said -> Power of CSS!
background: url(/images/bullet_boxed.gif) no-repeat 0 center;
}
I believe “0 center” wont validate since top, left, bottom, right are names reserved to be used to gether, better use the equivalent ->
background: url(/images/bullet_boxed.gif) no-repeat 0 50%;
}
Comment (#) by Johan — 29th October 2006.
Apparantly IE7 can’t display Lucida Calligraphy (not italic) - can anyone suggest a similar alternative to specify please? It just shows Times.
Comment (#) by Gill — 15th November 2006.
Hi Gill, try with the Lucida Sans Unicode, or even better – test your fonts with Typetester.
Comment (#) by marko — 15th November 2006.
I’ve got a weird bug on one site where IE 7 makes random list items in an unordered list inherit the background of the ul element and get anywhere from 1 to 10 extra pixels of padding on top. I’ve been trying all week to figure out how to avoid the bug.
Comment (#) by Paul D — 20th November 2006.
Sorry, the comment form is closed at this time, but if you have anything to say, please send me a message.