Thread: Can you do me a favour?

v Firefox 3.5

Spoiler for .:

v Windows Internet Explorer 7

Spoiler for .:

v Google Chrome

Spoiler for .:

v Opera 10

Spoiler for .:

thanks cloud,

looks like IE's going to be a problem....shit

Internet Explorer 8

Spoiler for .:

Edit:
Internet Explorer 6 (<3 XP mode)

Spoiler for .:

thanks khh,

So, IE < 8 doesn't work properly, great....
so much for coding a site to CSS2 specs (specs dating back to 1998, no less)

Is it reasonable to put a notice on sites saying they won't work with older versions of IE?

How do professional web developers deal with this?
IE is just broken

I believe proffesional developers use some sort of a browser sniffing feature, so that Internet Explorer browsers gets served a different stylesheet, one it works propperly on.
You could probably include a notice saying that only internet explorer 8 and higher is supported, however it would probably discurrage quite a few potential users, since I believe Internet Explorer 7, at least, is still widely used and considered a "new" browser.

Spoiler for Safari 4:

Originally Posted by Ynot

thanks khh,

So, IE < 8 doesn't work properly, great....
so much for coding a site to CSS2 specs (specs dating back to 1998, no less)

Is it reasonable to put a notice on sites saying they won't work with older versions of IE?

How do professional web developers deal with this?
IE is just broken

A quick glance at the source doesn't really throw up any obvious reasons as to why the tabbed menu isn't working in IE7 and below. The .1em width declaration on the a element is a bit odd, though?

Generally I throw in IE-specific stylesheets if there are big issues. Put them in an if statement in the head of the HTML, like so:

Code:

<!--[if lte IE 7]>
        <<link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection" />
  <![endif]-->

There's probably a problem with display properties or the like. I'll look into it when I have time.

Edit: What's with that JavaScript detecting em width?

Originally Posted by Man of Steel

Edit: What's with that JavaScript detecting em width?

what, this?

Code:

document.emSize=function(pa)
{
    pa= pa || document.body;
    var who= document.createElement('div');
    var atts= {fontSize:'1em',padding:'0',position:'absolute',lineHeight:'1',visibility:'hidden'};
    for(var p in atts){
        who.style[p]= atts[p];
    }
    who.appendChild(document.createTextNode('M'));
    pa.appendChild(who);
    //var fs= [who.offsetWidth,who.offsetHeight];
    var fs= who.offsetHeight;
    pa.removeChild(who);
    return fs;
}

I'm trying to keep everything em'ed, so as not to break personal style preferences, but I need to know em->pt for certain functions

Yeah... That's a lot of length to go to get a consistent font size.

A better way of doing that is to set your body font size to 62.5%, which in most browsers is 10px. Then set your font sizes per element in em. Since 1em is now 10px, you can set ems like px, so: p {font-size:1.2em;} would be 12px. As long as you're careful about specificity, that should take care of that. Just remember that ems are a relative measurement, so if you set p font-size to 1.2em then set span font-size to 1.4em, span font-size won't be 14px, but 1.4x 12px, which is about 17px (did I make that fuzzy enough?).

Why are you using pts for anything? It's an arbitrary measure used in print. It shouldn't really be used in web design.

Not trying to nitpick at you here, but I'm a bit of a stickler for best CSS/(X)HTML practices. I use the method I've outlined above, and have no problems with resizing. Plus it doesn't require using JavaScript for design elements.

Originally Posted by Man of Steel

Why are you using pts for anything? It's an arbitrary measure used in print. It shouldn't really be used in web design.

Not trying to nitpick at you here, but I'm a bit of a stickler for best CSS/(X)HTML practices. I use the method I've outlined above, and have no problems with resizing. Plus it doesn't require using JavaScript for design elements.

I'm using it as a measure for margins / padding

1em = 1 font height (as decided by viewers font settings)

Usually, I'd use %ages for relative positioning,
but absolute positioning needs absolute units.

I want 'absolute positioned' elements to scale with user's font settings, just like any other element, therefore I need to convert em's to pixels for use in page layouts.

Believe me, I have the unique position of being able to test out layouts on a 320x480px display (phone), a 1600x1200 display (PC) and a 1920x1080 display (TV projector)
so ability to scale effectively between differing resolutions is quite high on my list.

pt isn't arbitrary. It's 72 dpi on a web browser, invariable. That is unless the user zooms.

Speaking of, I noticed a bug Ynot. If you zoom using webkit (I assume Chrome does it too,) the top tabs go above the top of the screen. Yep, Chrome and Safari both do it.

Here's something you'll find useful that I wrote for my company: http://www.yourfilehost.com/media.ph...veCompress.zip

Go File > FullCompression, then drag your folder full of images into it. Should cut down on load time considerably. Don't worry about your files, png's by nature are lossless and the app will ignore everything that's not a png (unless you tell it to compress executables too, in which case it will compress exes and dlls.)

Originally Posted by ninja9578

pt isn't arbitrary. It's 72 dpi on a web browser, invariable. That is unless the user zooms.

Sorry, I guess I didn't clarify very well there. Point values (pt) are a unit of measure used in print. They should ONLY be used in a print stylesheet.

You say it's 72dpi; that's correct, and exactly why it's arbitrary (on a computer screen—not on paper)! There are 72 points in an inch: dpi is dots per inch. An inch is only accurately an inch in print. The actual size an on-screen 'inch' renders at is totally dependent on client-side resolution and DPI settings!

Definitely do use pts for print stylesheets, but ONLY in print stylesheets! Point unit-based sizes are drastically different in various browsers. Take a look at this (borrowed from CSS Tricks, hope Chris doesn't mind!):