crossbrowsing ie8 under windows xp

Question

So my nightmare have come true. I need to make this website im developinglook good not only for IE8 but for IE over Win XP, apparently this company still get support for XP and they have all their intranets working under XP.

After doing a first check on a virtual machine the website looks like hell even the layout was totally broken so i decided to use html5shiv js (that fixed the basic layout) besides things like reset all margins and paddings and <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><![endif]-->.

BUT everything still looks pretty messy, specially things like image re-sizing on the html for retina display matters (i know, LOL) and things that i float with display-block. I have read tons of things with the display-block situation over IE8 but i just cant find a way to make it work without changing all my display-blocks for floats or create another huge specific ie (under win xp..ugg) stylesheet.

Do you guys have a general advice in order to make my website (flat design nothing with transitions or anything fancy) at least look decent on ie8 under xp ? Any help will be really appreciated

Answer 1

I own (and use) a Windows XP machine in addition to something more modern and I actually still have IE6 on the XP machine so as a web designer, I am way too familiar about coding for something as quirky as IE.

One of the biggest and continuing quirks with IE is the fact that it is VERY unforgiving about processing CSS 'instructions'. Leave out one declaration - like heights and widths for example - and you get rubbish because the engine decides it will try to interpret as it will.

These quirks are annoying as heck to experience, but the truth is, these quirks can help you to become a stricter CSS coder.

That said, some thoughts to help avoid these particular problems:

1) Declare ALL dimensions of objects. This includes heights, widths, margins, and paddings.

IE does NOT like 'auto' sizes unless it is exceptionally obvious.

An example of 'exceptionally obvious' would be two blocks floated side by side both whose percent dimensions are explicitly declared which, when added together, equals to 99% (for the sake of the example) which leaves 1% explicitly available to be used as a margin space which can be calculated by IE correctly.

2) When using floats side by side and if the floats don't want to float politely next to each other, try adding this to the floated block element: display: inline;

Normal compliant browsers won't care about it and some designers will gripe about it being a 'hack' (and yes it is), but it's SHORT, sweet, and does the job without resorting to queries.

3) Make sure the container that holds the floats has overflow.

Some thoughts about 'pretty' vs 'older IE and people using XP':

1) If using CSS3 and having it render correctly is all that important to you, then I would suggest either a) use CSS3 for unimportant things only or b) create a stylesheet specifically for non-CSS3 browsers.

a) This way, if unimportant things don't load correctly (and don't cause cascading problems), big deal.

b) This way, so you can use CSS3 all you want however you want without worrying about how it will look for non-CSS3 browsers as you will have a separate stylesheet for them.

A thought on image scalability between browsers and operating systems:

1) This webpage HERE has a great discussion on Fluid Images and scalability and it also offers an approach for addressing image scaling in IE and Windows in particular.

You might have seen it already, but if you haven't, there it is.