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???

 

[jamieoliver22]

IE is one of the worst nightmares for web designers... ****** me right off, its a load of ******** at the end of the day.

And I have never used 'em' before, I always use 'px' and work my way around that.

But if you are using IE to read this, then you should go to hell If you are, switch to another browser and do us all a favor - www.getfirefox.com

Language!
Tolien

 

[sirlemonhead]

um no, i'll keep using IE 7 thanks

 

[Inquisitor]

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

 

[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!

 

[Boov]

em is equal to the text size of the body, which by default is set to that of your web browser, which usually is 16px

so on a brand new blank web page, 1em = 16px (usually)

however if you have a different default font size (tools > options) in IE than you do FF, then obviously the value of em will be different

best way to fix this is to define a font-size within the body using css

body {font-size:10px}

then 1em == 10px,
2em == 20px,
1.67em = 16.7px and so on