Solved

Targeting IE7 via an embedded style block

Posted on 2008-06-20
6
234 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
  • 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
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.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

685 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