IE Hacks Please Explain in detail

[docquesting]

This has me upset that I should be required to code a seperate css page just for IE if I understand these hacks correctly. Here is what I understand so far with example code and please correct me if I am going the wrong way in my thinking.

First I will post the xhtml insert to import css into that page.

<style type="text/css">
<!--
@import url(http://www.url.com/test/css/styles.css);
-->
</style>

Then the IE hack code that I located.

<!--[if IE]>
  <style type="text/css">
    @import url(ie-styles.css);
  </style>
<![endif]--> 

Now I would use the following way of inserting this into my current code om home page.

<style type="text/css">
<!--
@import url(www.url/test/css/styles.css);
-->

<!--[if IE]>
  <style type="text/css">
    @import url(ie-styles.css);
  </style>
<![endif]-->

</style>

Now if this is not the proper way please tell me by example so that I can understand what is going on and how and why. Perhaps I can insert some sort of code within my currently validated css like this.

<\......if ie......\>

Thanks.

[mkeefe]

Almost correct, accept the "if IE" would be outside the style tags.

<style type="text/css"> 
<!-- 
@import url([url]www.url/test/css/styles.css[/url]); 
--> 
</style>

<!--[if IE]>  
<style type="text/css">  @import url(ie-styles.css); </style> 
<![endif]-->

[Buddy Bradley]

Now if this is not the proper way please tell me by example so that I can understand what is going on and how and why. Perhaps I can insert some sort of code within my currently validated css like this.

<\......if ie......\>

The way you have described is the current 'best practice' method of delivering an additional stylesheet to IE browsers. If you wanted to include IE-only styles within your valid stylesheet, you could use the Tan Hack:

* html #mydiv {
  ...
}

Putting star-html before a rule will mean only IE can see it, but it remains valid (AFAIK). However, keeping everything in a separate file makes maintenance easier.

[blain]

and the tan hack doesn't work in IE7

[mkeefe]

True about IE7, that is why you should use the preferred MS way "if IE"

[docquesting]

This helps quite a bit. Can you guys be so kind as to point me in the right direction re links and such that are a good read for ie css coding?

I suppose that I should be coding for all versions above 5.0. How and where should I start to have the page look like it is supposed to?

[mkeefe]

I tend to hit IE 5.5 and higher, but in rare cases the client requires 5.0 access.

IE's blog has a great section on CSS in IE7 and older, but I have lost the link. I am sure someone else will be able to dig it up.

[docquesting]

Would this be it? From a quick glance over it seems only to talk about basic updates and not auctul coding methods.

http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx

Edit noticed a few links will need more time too browse.

[Buddy Bradley]

Can you guys be so kind as to point me in the right direction re links and such that are a good read for ie css coding?

In theory, you shouldn't really need to specifically code for IE if you write very clean, sensible CSS. It doesn't quite work out like that in practice, but I wouldn't recommend approaching it from the point-of-view you seem to be coming from, of "I must treat IE differently from the start".

The best resource for learning about IE's peculiarities is PiE's page Explorer Exposed! That page lists all the major (and minor) things you should be aware of when debugging a page in IE.