IE Hacks

[s_ff_da_b_ff]

ok so I know you have to do that <--[if IE ]--> blah blah blah crap.

 

Then I have to create a new style sheet specific to the one I put in between those <--[ ]--> tags or w/e.

 

So where do I go from there? Do I have to code the entire website from scratch again? How do I know what I need to code differently between an IE browser and all the other browers

 

 

 

I HATE IE.

[obsidian]

Typically speaking, you don't have to use conditional comments for styles. This is only necessary when you are doing some really off the wall layout with CSS. In 8 years of web work, I have only had two times where I had enough strictly IE code to merit using the conditionals and having an IE only style sheet. You really ought to check out the following website for the biggest IE hacks of which you need to be aware:

 

http://www.positioniseverything.net

[TheFilmGod]

Typically speaking, you don't have to use conditional comments for styles. This is only necessary when you are doing some really off the wall layout with CSS. In 8 years of web work, I have only had two times where I had enough strictly IE code to merit using the conditionals and having an IE only style sheet. You really ought to check out the following website for the biggest IE hacks of which you need to be aware:

 

http://www.positioniseverything.net

 

Wow, that's impressive! Although I rarely have to use IE only style sheets, IE seems to mess up the simpliest things, including colors. For some reason, it has color issues and the only way to fix this is to use a separate css tyle sheet. I personally think that there should be conditional statements (within) the css code that only ie would read. I'm not talking about hacks but valid css conditonals.

[obsidian]

I personally think that there should be conditional statements (within) the css code that only ie would read. I'm not talking about hacks but valid css conditonals.

 

That would be very nice. I would have to say, though, that the easiest solution would be for Microsoft to make IE standards compliant

[jordanwb]

I had to use the IE "hack" to get an unordered list to indent properly.

[bronzemonkey]

I think that any additional code whatsoever that is needed to get any version of IE to play along, should be in a specific conditional stylesheet.

[haku]

That's what I do. I usually have either one or two IE spreadsheets. My process boils down to this:

 

1) create my page in FF

2) check in IE7. If necessary, I had a conditional comment for all versions of IE, and I make my adjustments so it looks nice in IE7. Sometimes this step is necessary, sometimes its not.

3) check in IE6. If necessary (almost always is), create a conditional comment for IE6, and make my changes in that sheet.

[bronzemonkey]

Yeah, usually my IE7 stylesheet will just have a bunch of {min-height:0} declarations to trigger hasLayout in a few elements. Occasionally a couple of other fixes.

 

My IE6 stylesheet will have:

 

- {zoom:1} declarations to trigger hasLayout

- {display:inline} to correct any double-margin rendering

- {height:*} declarations for min-height emulation

- some IE expressions to emulate :first-child if it's being used (as well as IE6 specific overrides of the same properties to make sure the layout is still preserved - if not exactly replicated - with JS disabled)

- and then any misc corrections

 

It's always structured by specific groups of fixes because IE6's difficulties are totally predictable and often very easily overcome. I don't find it a difficulty to accommodate the browser, even though I will still encounter moments when a complex layout requires a bit of thought to get it working in IE6.

[haku]

usually my IE7 stylesheet will just have a bunch of {min-height:0} declarations to trigger hasLayout in a few elements.

 

{zoom:1} declarations to trigger hasLayout

 

Nice little tricks - I didn't know about them. haslayout hasgivenmeheadaches many times! These little tricks are nice to know when I run into the problem in the future.

[bronzemonkey]

That's right. The vast majority of rendering issues in IE can be resolved by triggering hasLayout like this.

 

Any time you need to get an element to clear its internal floats in IE, just trigger hasLayout with those declarations. They will also prevent those bizarre rendering problems on navigation blocks when you haven't set height/width dimensions and/or you have background images on the ul/li/a elements. In contrast to the "float nearly everything" method of clearing floats (which can often produce "peekaboo" rendering errors in IE6 that cannot be resolved) it is a very robust method of clearing.