How to use CSS and yet support older vers of Internet Explorer?

**u2fan** · Dec 29, 2004, 09:51

Hi we'd like to use CSS (2 i think) but would like to remain compatible (that is website should come up the same layout) with older versions of Internet explorer namely 5.5 and 5.0.

What's the best way of going about this? Thanks,

u2fan

**vgarcia** · Dec 29, 2004, 10:00

You have two options:

Never set padding/borders and width/height on the same element. This can work in most cases, but isn't practical all the time, or
Use the Box Model Hack.

I prefer the first approach whenever possible. The second one can get you out of a bind if there's no other option though.

**Paul O'B** · Dec 29, 2004, 10:10

Also have a look ath FAQ on the broken box model as there are different methods there also.

Ie5 and 5.5. can be made to look pretty good with very little effort. There are some things that just won't work very well but in the main its a matter of tweaking here and there. All the 3 col layouts in the sticky demo work in ie5 and ie5.5. and use some quite complicated css and they still work ok.

Paul

**KLB** · Dec 29, 2004, 10:15

You can always address version specific IE issues by feeding a custom style sheet that addresses the issues using the following method. It is valid HTML as it is essentially a comment and only only IE supports this hack. I personally find that I can usually get by with only a few style fixes for IE 5 and only on really rare occasions do I need to fix IE 6 using this method.

Code:

<!--[if IE 5]>
	<link href="/IE5.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 6]>
	<link href="/IE6.css" rel="stylesheet" type="text/css">
<![endif]-->

**jeremymgp** · Dec 29, 2004, 12:12

I'm tired of learning hacks for everything, we finally put the Netscape/IE conflict behind us, and no it's CSS hacks. CSS looks good though,

Jeremy

**vgarcia** · Dec 29, 2004, 12:15

Originally Posted by jeremymgp

I'm tired of learning hacks for everything, we finally put the Netscape/IE conflict behind us, and no it's CSS hacks. CSS looks good though,

Jeremy

You don't have to use CSS hacks. In some cases they may be a necessary evil, but there are usually ways around everything you would need a hack for. It might involve rethinking your layout or adding a div here or there, but it's definitely possible not to use CSS hacks.

**u2fan** · Dec 29, 2004, 19:34

Wow all the experts have replied thanks so much!

Just one quick question:

Never set padding/borders and width/height on the same element. This can work in most cases, but isn't practical.

Does height include line-height ??

Thanks again!

Regards, u2fan

**u2fan** · Dec 30, 2004, 02:53

Hi short of using the actual browsers, is there any way to test ie 5.5 and ie 5 results? I only have access to ver 6 IE.

Regards, u2fan

**Egor** · Dec 30, 2004, 03:15

http://www.quirksmode.org/browsers/multipleie.html - For multiple IEs.

And no, line-height is not in any way connected to the box model.

I don't see a problem with using a hack here and there. It certainly beats putting un-necessary divs in the html.

**u2fan** · Dec 30, 2004, 20:33

Hi these files you mentioned above (ie 5, 5.5 ) are corrupt !
Winzip won't open them and says the zip files are corrupt.

**zcorpan** · Dec 31, 2004, 09:32

I like putting IE6 into quirks mode. That way I only need to make one CSS workaround for both IE5 and IE6, as IE6 in quirks mode renders the same as IE5 (I think).

To do so, put anything above the doctype. A comment or an XML declaration will be fine.

Code:

<!-- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
...

**fish** · Dec 31, 2004, 09:36

But then you get problems with other browsers..

**MstrBob** · Dec 31, 2004, 10:53

Originally Posted by fish

But then you get problems with other browsers..

To my knowledge, other browsers won't go berserk with a comment above the DOCTYPE. I've tested it in Firefox, Mozilla, Opera, and IE. IE is the only one which will go into quirksmode. Another method of accomplishing the same thing is, if one is using XHTML, to put the XML declaration first. IE will go into Quirks mode, others won't.

But in generally, I find that one simply needs to know how to treat IE. There are some bugs one can take advantage of. My favourite example being to give a floated element the display:inline; property, which will eliminate IE's habit of doubling margins for floated elements. Certain things one just can't use with IE (position:fixed; anyone?) I've only really found it necessary to use hacks when dealing with IE 5x, as it can do some weird stuff. It is very much possible to go full CSS with IE 5x support included.

**Paul O'B** · Dec 31, 2004, 11:09

Originally Posted by zcorpan

I like putting IE6 into quirks mode. That way I only need to make one CSS workaround for both IE5 and IE6, as IE6 in quirks mode renders the same as IE5 (I think).

I'm afraid it doesn't render the same at all

Ie6 does use the broken box model and some other legacy behaviour in quirks mode but there are too many other differences to really use this as a good alternative (which is a shame because it would be easier

.

To take the most common example of the broken box model and apply the tantek box model hacks and you will find that ie5 and 5.5. are correct while ie6 is not correct. The reason being that ie6 understands and parses the voice family hack even in quirks mode and reads back the incorrect values. There are many other differences which will affect layouts so the easiest solution is to use the multiple ie versions which I have been using ever since they came out with no problems (apart from those documented).

I got mine from here and had them up and running in minutes once downloaded.

http://www.skyzyx.com/archives/000094.php

Originally Posted by mstrbob

Certain things one just can't use with IE (position:fixed; anyone?)

Well with a bit of hacking you can do things like this:

Fixed header and footer for ie and moz:
http://www.pmob.co.uk/temp/fixedlayoutexample2.htm
http://www.pmob.co.uk/temp/fixedlayoutexample3.htm

However its a shame that ie didn't implement position fixed because its so useful. (The only place position fixed works correctly is on background images on the body element.)

A lot of these problems and fixes are documented in the FAQ thread if anyone wants some reading

. (broken box model, all about floats and double margin bugs, 3 pixel jog etc)

Paul

**u2fan** · Dec 31, 2004, 14:06

17-20% of our site users use IE5 so we have a major prob as IE5 is showing a messed up site.

**zcorpan** · Dec 31, 2004, 19:35

(The only place position fixed works correctly is on background images on the body element.)

...and the HTML element.

**u2fan** · Jan 1, 2005, 08:20

The worst part of this css2 and xhtml is that our page validates as valid transitional by validator.w3.org and the css as well but IE5 does not load the page completely (last part of the page is missing) and notice a few other weird effects.

**u2fan** · Jan 1, 2005, 08:32

Ok folks here's one question that I have: if I use the x-small declaration for font size in my CSS file, why is it that the fonts sizes are quite large when viewed with IE 5 and 5.5?

What's the fix for this? thanks, u2fan

**Paul O'B** · Jan 1, 2005, 11:20

Hi,

IE5 and 5.5. (and ie6 in quirks mode) are one size out with their keywords so you need use the star selector hack to offer them the correct size. (See the FAQ on font-sizes for further explanations

)

The other problem is that you need the height:1% hack on .blogbody to force
ie into layout mode. This is the probably the most annoying of IE's habits and is actually something that MS has crafted into IE for some unknown reason.

Elements that do not have dimensions applied don't have "layout" and don't behave as they should. This is most noticable on elements that have their size defined by margins alone nd can cause any number of strange behaviours.

There are a number of other properties that will cause this "layout" to be implemented which is why everybody keeps thinking they've discovered a new hack but they are really only addressing the same problem.

More info:
http://msdn.microsoft.com/workshop/a.../haslayout.asp

Hope that helps.

Paul

**Paul O'B** · Jan 1, 2005, 11:24

Originally Posted by zcorpan

...and the HTML element

Correct

**u2fan** · Jan 1, 2005, 20:02

Hi Paul thanks so much for your replies.

So to blogbody I should just add height:1% ??

**u2fan** · Jan 1, 2005, 20:12

And the other question is, that the FAQ states the following code for standard font size for IE5-Ie6 :

* html body {font-size:small;f\ont-size:medium}

what's the backslash there for? Thanks again!

**u2fan** · Jan 1, 2005, 20:22

Ok I read the FAQ again and understand the use of backslash but I tried the following:

font-size

-small;
f\ont-size:smaller;

Now the font size shows up as medium in IE5-6. However I require the font size to be x-small (smaller).

So then what do I use in the css? thanks!

**u2fan** · Jan 1, 2005, 23:54

Ok found a similar hack for IE5 font issue:

font-size: x-small; /* REDUCE desired size a notch for IE 5 */
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; /* REAL DESIRED SIZE for all other browsers */

Looks like the same as above?

**Paul O'B** · Jan 2, 2005, 05:08

HI,

I've already emailed you all the code you needed

Here it is again:

Code:

* html .description,
* html .title,
* html .menu,
* html .comments-head,
* html .trackback-body,
* html .trackback-url{font-size:x-small;f\ont-size:small;}

* html .posted,
* html .calendar,
* html .calendarhead,
* html .side,
* html .sidetitle,
* html .comments-body,
* html .comments-post,
* html .trackback-post{font-size:xx-small;f\ont-size:x-small;}

* html .date{font-size:small;f\ont-size:medium;}
* html .banner-commentspop{font-size:medium;f\ont-size:large;}
/* mac hide - because of 1% hack\*/
* html .blogbody{height:1%;font-size:xx-small;f\ont-size:x-small;}
/*end hide - keep these three lines together (inclusing this one) otherwise 
hack won't work */

This works by giving ie5 and 5.5. the size smaller and ie6 (in standards mode) the correct size.
e.g.:
* html .trackback-url{
font-size

-small;/* for ie5 and 5.5./*
f\ont-size:small;/* for ie6*/
}

Originally Posted by u2fan

font-size

-small;
f\ont-size:smaller;

That code above won't work properly because you are giving ie5/55.5. the x-small size but you should then be passing the small size to ie 6 not smaller. smaller will make it smaller than its default whatever that happens to be in its current context.

Also don't use the voice family hack unless you know what you are doing because IE5 jumps not only the next style but the whole next style block! The star selector hack is much better and easier to use ans is also valid code when media="screen" is required.

Paul

The SitePoint Forums have moved.

User Tag List

Thread: How to use CSS and yet support older vers of Internet Explorer?

Thread Tools

Display

How to use CSS and yet support older vers of Internet Explorer?

Bookmarks

Bookmarks

Posting Permissions