• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 245
  • Last Modified:

Targeting IE7 via an embedded style block

Here's the situation:
I've just been handed a Javascript file which writes a bunch of html to the document via document.write(); . I need to change around this html considerably, and it has to work in *at least* FireFox, Safari, and IE7. I have no access to any file other than this one Javascript file.

As I see it, there are two ways I can include css:
1) Inline via the "style='....'" attribute
2) I can have the Javascript function spit out a <style type='text/css'>...</> block before I have it write my html.

But how do I target IE7 in this situation? I've only really dealt with fixing IE6 bugs, which I did via a Holly Hack. Obviously that won't work with IE7.

Thanks.
0
Melvinivitch
Asked:
Melvinivitch
  • 3
  • 3
1 Solution
 
hieloCommented:
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->

via method #2: document.write("<!-- ... -->");

http://www.quirksmode.org/css/condcom.html
0
 
MelvinivitchAuthor Commented:
Conditional comments do not appear to work within a style block. But I found that the method outlined at the URL below seems to work. That is, using conditional comments to wrap all your html in a div that only IE sees, and then using descendant selectors in your css to generate IE-specific behavior. This makes the IE-targeting syntax in the style block nearly identical to a Holly Hack.

http://www.positioniseverything.net/articles/cc-plus.html
0
 
MelvinivitchAuthor Commented:
Can anyone verify that conditional comments do or do not work in a style block directly?
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
hieloCommented:
>>in a style block directly
Not "in" - "OUT". The conditional comment "Wraps" around your html tag (<link..>,<style...>, or whatever else):

<!--[if IE 7]>
<style type="text/css">
body{background-color:yellow;}
</style>
<![endif]-->
0
 
MelvinivitchAuthor Commented:
Ok, so I can just do a 2nd, IE-specific, style block after the main one, and re-define any classes I need to in order to target styling specifically to IE....right?
0
 
hieloCommented:
Correct. The conditional comment need to be AFTER the "main" style block.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now