How to detect IE6 or IE 7

[Tigran]

Hello guys,

I was making a website, all looked great, untill I started IE7. there, it really looked like crap.
Now I'd like to just make another css file for IE6 and/or IE7 but not for IE 8, because it does look wel at that browser.
How can I detect IE7 using javascript?

Thanks in advance,
Tigran

[ShawnCplus]

It's usually better to add/remove CSS files for specific browsers using HTML conditions like so

<link rel="stylesheet" type="text/css" href="somestyle.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7specific.css" />
<![endif]-->

[Tigran]

Thank you, that's very usefull.
Do you perhaps know a link to a tutorial about those HTML conditions etc?

[ShawnCplus]

www.quirksmode.org/css/condcom.html

[MidiMagic]

It is better to fix the deficiencies in your code, rather than trying to make separate CSS sheets for different browsers:

1. Validate your html/xhtml with the W3C validator. Repair all code that does not validate. Bad code throws each browser into its quirks mode. Quirks mode causes widely varying renderings.

2. Watch making objects not fit. If the browser can't render the page as written because objects do not fit in the available space, different browsers do different things to make adjustments needed to render the page.

For example, if two images are too big to fit side by side, IE causes the last image to drop below the other one. Firefox causes one image to cover part of the other one.

3. IE renders certain objects differently than other browsers. For this reason, it is not a good idea to put size styles (width and height) and surrounding styles (margin, border, padding) in the same style or on the same tag.

To fix this, nest two tags, one with the size styles, and the other with the surrounding styles.

4. IE has tiny differences in rendering (compared with other browsers) that can make the design fall apart. To avoid this, never make the fit so tight that a few extra pixels prevents the fit.

5. Don't use pixels to define sizes. Use percentages to lay out pages, and ems to adjust sizes around text.

6. Make your design flexible. Different computers, different browsers, and different toolbar selections leave different sizes (in pixels) for the height and width fo the viewport.

7. Never try to make a rendering exactly fit the viewport. It will never work, for these reasons:

- Different computers have different screen resolutions. This is set by the owner, not by you.

- Different browsers have different viewport sizes.

- Even if the browser does render your page the way you want it as set, the guy down the street has the Google toolbar added to it, and the rendering does not fit his computer.

8. Don't try to make a footer at the bottom of the screen. It will fail for the same reason.

9. Leave plenty of space between items. Then a smaller resolution screen can render them closer together.

[ShawnCplus]

It is better to fix the deficiencies in your code, rather than trying to make separate CSS sheets for different browsers:

1. Validate your html/xhtml with the W3C validator. Repair all code that does not validate. Bad code throws each browser into its quirks mode. Quirks mode causes widely varying renderings.

2. Watch making objects not fit. If the browser can't render the page as written because objects do not fit in the available space, different browsers do different things to make adjustments needed to render the page.

For example, if two images are too big to fit side by side, IE causes the last image to drop below the other one. Firefox causes one image to cover part of the other one.

3. IE renders certain objects differently than other browsers. For this reason, it is not a good idea to put size styles (width and height) and surrounding styles (margin, border, padding) in the same style or on the same tag.

To fix this, nest two tags, one with the size styles, and the other with the surrounding styles.

4. IE has tiny differences in rendering (compared with other browsers) that can make the design fall apart. To avoid this, never make the fit so tight that a few extra pixels prevents the fit.

5. Don't use pixels to define sizes. Use percentages to lay out pages, and ems to adjust sizes around text.

6. Make your design flexible. Different computers, different browsers, and different toolbar selections leave different sizes (in pixels) for the height and width fo the viewport.

7. Never try to make a rendering exactly fit the viewport. It will never work, for these reasons:

- Different computers have different screen resolutions. This is set by the owner, not by you.

- Different browsers have different viewport sizes.

- Even if the browser does render your page the way you want it as set, the guy down the street has the Google toolbar added to it, and the rendering does not fit his computer.

8. Don't try to make a footer at the bottom of the screen. It will fail for the same reason.

9. Leave plenty of space between items. Then a smaller resolution screen can render them closer together.

We both know no matter how many best-practices you follow you WILL have to hack for IE6.

[Tigran]

I'll have to agree with ShawnCplus, and I don't want to spend so much time making my code better for this project, I already fixed my website by setting 24 lines of CSS and it now works perfectly.
However, you've posted very good tips there, for that i'll bookmark it and keep them in mind while working in the future, thanks.