Menu
I am currently developing a theme for a homepage but ran into a few problems. For whatever reason I have no access to editing the html code itself, and I need to write custom .css for IE (specifically versions below IE9).
I have "two" issues. First one is dual backgrounds. Versions below IE9 can't seem to render them flawlessly. If IE skips the element, this is fine but since the graphic in this element co-works with another element (for a smooth graphical transition), it makes the other element look weird. The graphic in this second element is a background within a div-box. I want this background to be another custom background that's only rendered if the user is using IE as browser; and if possible, I want this to only apply to versions below IE9 (site is rendered with dual backgrounds just fine in IE9).
http://patrikarvidsson.com/project/sohelp/illustration.jpg
CSS is as follows (#mainframe is the part under the header navigation box). The lower image is how it is rendered in IE8. IE7 shows the same. First one is FF/Chrome/Safari and IE9.
#mainframe {
background: url('img/bg2.png') no-repeat,
url('img/bg1.png') repeat-y !important;
}
I've searched quite a lot on the net, also been asking friends and this does not seem to be working without writing conditional comments within the html markup. Am I missing something? Is this doable somehow with only the use of .css files?
Site is using jquery. I don't know this stuff, but I thought I'd mention it just in case.
838
CSS Conditional Rules is a CSS module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.
Conditional comments use a special syntax—HTML markup wrapped in a conditional statement—and are placed within an HTML comment. If the statement evaluates to true , the enclosed HTML is revealed within the HTML document. If the statement evaluates to false, the enclosed HTML remains hidden.
Conditional comments are most commonly used to serve additional IE-only CSS styles to IE browsers, often to work around bugs or inconsistencies in these browsers' CSS implementations, while serving a standard style sheet to all other browsers.
--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content. Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files.
You might want to look into this article which explains how to use conditional comments to set classes on the html element. You can then use that class to target specific browsers in your stylesheet, in a clean way.
Your html tag would look something like this:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
Edit 2
Since the announcement that IE10 will not support conditional comments I though it would be nice to update this answer. I tested the type of comments it will support and it seems that the above will still work, but if you want to target higher than 10 or only 10 you will be out of luck. As suggested by Microsoft themselves on their blog (link in comments @MarcoDemaio) you should use feature detection.
Then you can do something like this in your css:
.somestyle {
background: transparent url('derp.jpg') no-repeat;
}
/* ie6 fallsback class */
.ie6 .somestyle {
background: #eee;
}
Read the article, and good luck ;)
Edit 2:
Since IE7 isn't my greatest concern anymore and IE9 is pretty consistent in its behaviour I can get away wil just the following code (which will add a class only for IE versions less than IE9):
<!--[if lt IE 9]><html class="lte9"><![endif]-->
<!--[if gt IE 8|!IE]><!--><html><!--<![endif]-->
Edit 1:
Ok I managed to miss your "can't edit html" comment.
In that case you can only use browser specific hacks, I think they're dirty as hell but hey, if you have no other option......
Somthing like this:
.someclass {
*color: blue; /* IE 7 and below */
_color: blue; /* IE 6 */
}
/* IE6, IE7 - asterisk hack */
.someclass { *color: blue; }
/* IE8 - winning hack */
.someclass { color: blue\0/; } /* must be last declaration in the selector's ruleset */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
