Save the Internet: Click here


Kickass Web Design creates Custom WordPress Themes, CubeCart Templates, ModX Templates, Movable Type Themes, ZenCart Themes, Drupal Themes, Tolranet Directory Script Templates, as well as templates for other web applications. Dreamweaver Templates also available. We can match your current design or create something totally new and different. Interested? Request a Custom Website Template Quote.


Conditional Comments are your friends

I’m in the process of future proofing my sites so that they don’t break in [tag]IE7[/tag] for any reason OTHER THAN the (possible? probable?) bugginess of IE7. How can you do that? By feeding in a separate stylesheet for IE versions numbered 6 or less via a [tag]conditional comment[/tag]. This is how:

<!–[if lte IE 6]>
<link rel="stylesheet" href="iestyle.css" type="text/css" media="screen" />
< ![endif]–>

This conditional comment should be the last entry in the HEAD portion of your HTML document. The file called iestyle.css is simply all styles that are fed to IE6 and less via all the hacks we’ve been used to using, such as the star html hack, which we already know won’t work to filter things to IE7 b2.

By doing this I’m ensuring that all of my [tag]IE6 hacks[/tag] are hidden from IE7 (and IE7 beta 2.) Now they just have to give us an [tag]IE7 specific filter[/tag] so we can fix the new bugginess. (Any MS Engineers who find their way here– PLEASE give us an IE7 filter! Just one! That’s all we need!)

Microsoft’s page on Conditional Comments has the full scoop on how to use them.

Oh, and if those MS engineers DON’T give us that filter and, as rumor has it, they don’t fix [tag]min-max width-height[/tag] in time for the version release of IE7 we are all in for a roaring fun time . . .

Hmm. I wonder if looking at all those sites out there that will only be broken in IE7 will be enough to push all those non-geeky type browser users into the FireFox or Opera camp . . . one can only hope!

Share this post:
  • blogmarks
  • del.icio.us
  • digg
  • Furl
  • NewsVine
  • Spurl
  • YahooMyWeb

7 Responses to “Conditional Comments are your friends”

  1. vkaryl Says:

    Darn it – something or other changed the “double dash” to an em dash. Couldn’t figure out why it didn’t want to work!

    Sheesh.

  2. BJ Says:

    oops. Good call, WP changed that. I just learned something though, the backward single quote works in WP same as on WP forum. It’s fixed now!

  3. IE and vertical Link Lists- Why do I have double padding top and bottom? Says:

    [...] #8221; thing. So you simply feed a height of 1px or some other haslayout trigger through a Conditional Comment to the “li” in question. Pro [...]

  4. Review of SmugMug Template Customization Says:

    [...] This is just the tip of the iceberg. There are a WHOLE LOT of IE6 hacks that are going to most likely break every smugmug site when IE7 is released as a priority update through MS. The developer who wrote the smugmug xhtml/css code that you have no choice but to use or override did not follow best practices for IE hacking, and all the hacks are directly in the stylesheet that all versions of IE will use, which means every SmugMug site will likely look like a pile of manure in IE7. [...]

  5. futurist Says:

    Many thanks for this one! Just had to remove the leading space in the closing portion of the tag, otherwise the browser shows it. it should read:

  6. bj Says:

    You’re welcome, futurist! I guess the pre didn’t work, huh? :)

  7. Futureproofing and fixing for IE7 layout issues Says:

    [...] In an earlier post, Conditional Comments are your Friends, I outlined the best way to future proof your website against the onset of IE7, by using a conditional comment to feed a separate stylesheet with your IE6 and less adjustments in it. This would keep the dreck away from the good browsers (assuming, of course, that IE7 is one of them) and allow IE6 and earlier to play nicely. [...]

Leave a Reply


Three sites launch on Custom Kickass WordPress Themes
laurabowers250.jpg