As some of you may know, I have been against using CSS hacks for a long while.
Now that IE7 is coming out very soon and we know that many CSS hacks will break in IE7, we need to come up with another viable solution to make CSS based layouts work in IE6, and the other more capable browsers …
That’s where IE conditional comments come in. This IE specific code/tool is safe and solves all our problems when creating cross browser pure CSS layouts.
Check out the video: IE Conditional Comments
An excellent tutorial as usual from Stefan.
I look forward to all your tutorials and comments and find them really informative.
Thank you.
A ‘top notch’ tutorial Stefan, clear and concise……I’ve got a question for you - What type of software do you use to create this tutorial? I know the end product is an swf, but what do you use to capture your screenshots/actions/audio?
Thanks a bunch…….dod
Stefan,
Thanks for the awesome tutorial/presentation. Very clear and to the point.
Question: In regards to the “fix” you entered into the CSS regarding the height, (height: 1200px;), Did you “trial and erred” until you found the spacing issue was no longer apparent?
BTW … In this tutorial you have once again introduced me to something I did not realize was going to be an issue (CSS hacks will not work in IE 7).
Stefan,
Great tutorial ! I did have one question though. In the majority of the examples you ended the if statement with , but when you used the gte example, you used would that only stop the if statement if the user was using IE 5? Or will it stop the if statement all together if the user is using IE. Could we keep everything the same and just use for any of the if statements?
Thanks for the awesome info, keep up the good work!
I’m not sure if I understand your question … that said: gte means: ‘greater than or equal to’ Example:
<!–[if gte IE 5]>
You will see this if the browser is Internet Explorer 5 and up
<![endif]–>
<!–[if lt IE 6]>
You will see this if the browser is Internet Explorer lower than 6
<![endif]–>
<!–[if lte IE 5.5]>
You will see this if the browser is Internet Explorer lower or equal to 5.5
<![endif]–>
NOTE: I did not mention that IE conditional comments only work with Windows … not Mac. But since Mac IE has all but disapeared … we are ok.
Hello Stefan,
thank you for your clear and easy-to-understand (even for me as a german) tutorial! It helped me with a problem that I had with a website I am working on at the moment. Hooray!
Bettina
Great tutorial! It sure gave me a better understanding of how to utilize a separate CSS for IE, something I hadn’t thought of. I’ve always hated to use hacks and knew they would ultimately end up biting web designers in their, um, behinds. Thanks for a very informative video.
Stefan-
I use IE conditionals as well. I was just wondering, why would you use an entire stylesheet for one IE fix? I use inline code to fix the problem. I thought it would load quicker just to paste the single comment.
Example:
#main_content{
height:inherit;
}
Is this better/worse/equal to what you have done? Is there a major difference between which you use? Just curious..
Robert
opps sorry I guess I messed the coding up on there. I meant that snippet to be inside the conditional where you were linking to the stylesheet.
I’ve found the conditional comments tutorial very helpful and well ellaborated. It has good timing and, even it’s quite long attention can be paid all the way.
I liked very much. (mario www.artandata.com.br - brazil.)
I feel really stupid here: in order to insert the code it appears I need to copy it from your video. I must be missing the place to cut and paste, yes?
Initially i don’t know manything to develop an interactive site after getting some tips from Killersites tutorial,my work has been changed totally.Now i’m doing great jobs.
Great presentation, as usual. I’ll try this on the next incarnation of my website. By the way, the Flash movie won’t display properly on a Mac, regardless of browser. Basically, Macs will only play the first 4 seconds of it, then stop. Had to open it up in IE6 on WinXP to see it.
Cheers
Thank you for sharing this nifty trick in such a succint and clear fashion. Brilliant! I’m sure this will help a lot of designers and save us all a lot of time and sweat when IE 7 comes out.
Thanks a lot!
@Arleen,
You need to get the latest version of FireFox for MAC and you will be OK.
This is a known bug with Safari and older versions of FireFox on MAC.
Thanks,
Stefan
@Rob,
You said:
“… why would you use an entire stylesheet for one IE fix?”
Because later on I may want to add other rules that would be applied to multiple pages.
But, if your project is that small, then do it inline (on the page itself.)
Remember:
Rules are meant to be broken - under special circumstances.
Great intro to conditional comments! For someone w/out familarity w/ css hack techniques this is extremely helpful. Thanks!
I am having mayor problems with testing all mentioned here. Somehow stupid as I was I have installed IE 7.0.5 in a blink of an eye. This was a little while ago and it did not bother me untill recently when a website I made seemed to be messed up in IE 6.0.2.
The solution mentioned here sounds great! But I cannot see the damn thing in IE 6.0.2. because of IE 7.0.5??! Or am I wrong and is there a way to have IE 6.0.2. together with IE 7.0.5?
I’m almost crying…:lol:
Hello! You have an outstanding good and well structured site.
Thank you!