We were supposed to roll out my wife’s website last night, but it’s been delayed. The reason? My last minute adjustments and testing on MS IE showed that I’m seeing drastically different things between IE and Firefox. Different isn’t necessarily bad. In this case, I’m proclaiming IE as guilty of misbehavior. When I state that <img width=”970″>, I expect it to take 970 pixels across my monitor. That’s what Firefox does. But IE inflates it by (this is just guestimation here - I’m not on that monitor now) maybe 25%. The image in Firefox looks clean and crisp and the text that is embedded in the image has well-defined borders. Not so in IE. Pardon my Esperanto, but IE’s display of my page looks like rubo. (And if someone wants to correct my Esperanto, I’d be much obliged.) The embedded text is really fuzzy around the borders, the image is way larger than I intended, the quality of the image even looks lacking. To be fair, it all could have something to do with the funky scaling up of the image that IE is doing, but it’s hard to get a side by side comparison when IE is munging the page so badly.
This is my first experience of being abused by IE. I’m no web designer (or really a web developer) as I thoroughly warned my wife upon doing this for her, but I can’t believe that the terrible page display is all me. It looks at least tolerable in Firefox. It just looks awful in IE.
The biggest problem in IE is how it is mangling the words that my wife embedded in the image. We’ve tried jpeg and png. I’ve tried a variety of resolutions which are reasonable to put in a web page. We’ve tried some different fonts. I even tried mucking around with tables, using the image as a background, and positioniong <a> tags on top of the image where I want them. (Which is exactly what they were for - just links.)
Now, what I’m resorting to tonight is splitting two copies of the image (one “normal” resolution, one high resolution) up into the same number and same size, shape, and position of smaller images, throwing the “normal” resolution images into a table and replacing the pieces that contain text with the higher resolution images (and leaving the img width and height attributes at the “normal” values). IE will likely still munge my image, but at least it’ll have higher quality images in the text slots. Hopefully it won’t mess that up as well.
I think it’s ridiculous that I have to go through such gymnastics in order to get a page to display properly in IE, but I’m nearly certain that the majority of site visitors will use IE. Am I going about this all wrong? I really don’t like the idea of using a 900 pixel wide image as a banner, but my wife’s business is very image intensive, so she wants the site to represent her work (which is basically family-oriented custom graphic design).
Anybody have any Firefox/IE compatibility tips for graphically intensive sites? How about IE compatibility war stories?