MS IE being nonstandard *rant*

[Shoseki]

What a piece of crap IE is, seriously.

I saw something on a random forums recently : http://www.webmasterworld.com/forum83/5632.htm

A guy there (in the first post) calculated a "magic conversion number" between pixels and em (even though there is no fixed value for it).

I have been looking for a way to make a website that I run "scaleable" so that it wasn't so restricted by its' fixed width layout, but still retained a couple of specific design attributes (a single image background being an important part).

I tried using the 0.0626 value to convert all of my pure px values to em, and it works an absolute DREAM. With the ctrl-scroll of my mouse, not only can I increase the size of the text, but the layout too - exactly what I was looking for.

Of course, I try all of this in Firefox, which is my preferred browser. And then I turn to the IEs to see if all's well there. You can guess the nature of this thread. All is NOT well.

IE6 works perfectly. Resizing the text also resizes the images, ofc I was expecting to start to see jaggies as the images have a fixed resolution (until I convert to SVG, sometime next century when people can use them reliably). However IE 7! What a total piece of crap.

Not only does it resize the text, it *tries* (poorly) to resize the website too! I have been aware of this "feature" but it hardly seems standards compliant. I use vertical and horizontal centering on my site, but of course that is dependant on the "viewport" centre, of which this resizing also violates! Its as though it resizes the viewport, scales everything and then but doesn't bother recalcuating the relative values within a document.

What is the point of that???

 

[Shoseki]

Why would you want to avoid using em? It's exactly what you need when you want the size of certain elements of the page to scale with the type face.

I really don't understand what you're trying to do

I want to use em However, the layout that I designed had some unique page elements, one of which is a image background.

As far as I am aware, this is only way to complete this operation : I want the entire page layout to remain, but the design of the web site to change. This was done by using an image background, laying out the foreground for content over the image background, so it was a "fixed width, fixed height" website and the content went into scrollable divs of fixed width / height. The background image can then be cleanly switched with another, with a short javascript function, fading the opacity of one website image with another until 100%.

This all works, however, the main drawback is that the size of the website was fixed at 700x598 (my original layout size) and for much larger resolution, this design falls down due to lack of scalability.

I found a neat little trick that can only be done by inserting the image background directly into the html rather than in the CSS - by specifying the size of an image to be width="100%" height="100%" I can make its containing div any size I like, and the image with correspondingly scale vertically and horizontally, unlike the background-image :url() route. So I put the background images that "rotate" to be 100% of the containing div, and then I specified the size of the containing div in em, using the formula 0.0626*width and 0.0626*height, producing a div

width : 43.82em;
height : 37.4348em;

And this works perfectly (though I didn't test in linux, only ie 6, FF, ie 7). But ie7 is so bizarre with its' new resize function!