Solved

Targeting IE7 via an embedded style block

Posted on 2008-06-20
6
232 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

786 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