Solved

Targeting IE7 via an embedded style block

Posted on 2008-06-20
6
237 Views
Last Modified: 2013-12-08
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
Comment
Question by:Melvinivitch
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21835978
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->

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

http://www.quirksmode.org/css/condcom.html
0
 

Author Comment

by:Melvinivitch
ID: 21837612
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
 

Author Comment

by:Melvinivitch
ID: 21837613
Can anyone verify that conditional comments do or do not work in a style block directly?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 21838087
>>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
 

Author Comment

by:Melvinivitch
ID: 21838247
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
 
LVL 82

Expert Comment

by:hielo
ID: 21838286
Correct. The conditional comment need to be AFTER the "main" style block.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question