5

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.

Kara
  • 6,115
  • 16
  • 50
  • 57
arvdsn
  • 75
  • 1
  • 2
  • 7
  • 2
    Can you show a live example of the background problem and/or describe in more detail what happens in IE < 9? Maybe the problem can be solved at its core – Pekka Oct 02 '11 at 09:41
  • Unfortunately I can't show a live preview as the client want this to be held secret. I did however take a printscreen and stripped out the unnecessary parts and included the CSS in the main post. I hope this is enough to illustrate the issue! – arvdsn Oct 02 '11 at 10:33
  • ahh, it's a PNG with transparency. That is indeed a problem in IE < 9. – Pekka Oct 02 '11 at 10:34
  • You don't have to show the exact code that you're using, just replicate the issue at [JS Fiddle](http://jsfiddle.net/), or similar. Using different images and [Lorem Ipsum](http://lipsum.com/) text if necessary. – David Thomas Oct 02 '11 at 10:34
  • @David Thomas Ah, I knew about JSFiddle. This one requires the images though which also wants to be kept hidden! ;-) Pekka: Yes. It is fine though if it's unfixable. What I am looking for is a way to exchange the background of header navigation. This way I can repaint it so that the cake does not pass over to the mainframe, which renders dual backgrounds unnecessary. – arvdsn Oct 02 '11 at 10:39
  • you could use css selector hacks [http://www.webdevout.net/css-hacks#in_css](http://www.webdevout.net/css-hacks#in_css) – Marian Theisen Oct 02 '11 at 10:40
  • _"For whatever reason I have no access to editing the html code itself"_ its like a doctor would ask - "i need to perform surgery, but client don't let me access to his body", and in both cases anwser is same: such client must change his decision or die, for the sake of evolution! – c69 Oct 02 '11 at 16:31
  • @c69 I know, and I've told them. But a lot of privacy is behind it all I suspect. Nonetheless, I try to manage. – arvdsn Nov 25 '11 at 11:03

3 Answers3

9

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 */
Community
  • 1
  • 1
sg3s
  • 9,411
  • 3
  • 36
  • 52
  • multiple backgrounds is somewhat achievable in ie8, if you follow what @sg3s has set up for you to target ie's separately. using content:,:before and :after. you can read all about here: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ – albert Dec 05 '11 at 01:46
  • WARNING: IE 10 will NOT support conditional comments anymore ref. http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx – Marco Demaio May 03 '12 at 15:00
  • @MarcoDemaio It will however support this line: ` ` (I tested this recently for a website I am working on, Windows 8 Preview w/ IE10) – sg3s May 03 '12 at 15:25
0

I had this problem in my CMS application so...

Create a container div have it's class the browser name and version to be looks like

<div class="ie_6_0">

<div class="your_custom_elements">
 ///////
</div>

</div>

and do you CSS classes like

.your_custom_elements{common styles between versions}
.ie_6_0 .your_custom_elements{do somthink for old versions}
.ie_9_0 .your_custom_elements{do somthink for new versions}

UPDATE 1

or like

<div id="mainframe" class="ie_6_0">
///
</div>

and CSS like

#mainframe{common styles between versions}
#mainframe.ie_6_0{do somthink for old versions}
#mainframe.ie_9_0{do somthink for new versions}

ie_6_0: as your user browser name and version must request it and add it by code.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Mhmd
  • 4,989
  • 3
  • 22
  • 29
  • Thanks, but I wish to solve this without the use of the html files. I'm afraid I can't though, if it comes to that I'll keep this example in mind! It all depends on the client after all. – arvdsn Oct 02 '11 at 10:41
  • yes, you must request your user browser and add it as a class to your container, good luck Patrik :) – Mhmd Oct 02 '11 at 10:47
0

For your dual backgrounds problem, you simply need to add another containing element.

<div class="element">
...
</div>

becomes

<div class="container">
    <div class="element">
    ...
    </div>
</div>

I'm not sure why you wouldn't be able to manually edit the HTML, but if you have access to a javascript file and you're using jQuery, you can add the class like so:

$('.element').wrap('<div class="container" />');

You can use CSS hacks to avoid using conditional comments. CSS hacks aren't as commonly used now since the average user uses a browser that doesn't require any hacks to display properly, but it is still a completely valid and reliable way to avoid using HTML conditional statements. Depending on the specificity you want, you have a bunch of different hacks that you can use to only target specific versions of IE:

* html .element { color: #fff; /* IE6 only */ }
html .element { _color: #333; /* IE7 only */
*+html .element { color: #999; /* IE7 only */ }
html .element { *color: #000; /* IE7 and below */
html .element { color: #ccc\9; /* IE8 and below */ }

So:

#container { background: url(img/bg1.png) repeat-y\9; }
#container #mainframe { 
    background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important;
    background: url('img/bg2.png') no-repeat\9; }
Wex
  • 15,539
  • 10
  • 64
  • 107