Div background translucent color won't show up in IE - Baffling

Hello, on this page http://leadinc.no/drupal7/  I have a div to display text on the upper-left corner of each image. The following code renders translucent background color in Chrome and Firefox.

However, no matter what I put in I can't get ANY background color to showup in IE.

I even tried - as you can see further down - to target individual versions of IE using hacks I found online.

Would you please help figure out what I have to do to get the background show up in IE.

I only care about translucence in IE 8 and 9. In IE 7 and earlier it can just be solid background.
/* --------------------------styling rotating banner text ... ...................... */


div.rb-slides div.layout-wrapper {  /* applies to all text divs, regardless of location on the slide ...  */

/* adding border ...  */
	display: block;
    outline: none;
    -moz-box-shadow: 3px 3px 5px #444;
    -webkit-box-shadow: 3px 3px 5px #444;
    box-shadow: 3px 3px 5px #444; 
    
	/* padding around the text ...  */
padding: 15px 20px;

/*  translucent bg - matches the hovers of project index pages except .7 value is now .8...  */


background: rgb(255,255,255);
    background: rgba(255,255,255,0.7);
	  filter:alpha(opacity=70);
	  opacity:0.7;
	  -moz-opacity:0.7;
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari/Chrome */
	
}

/* Show only to IE7 */
*:first-child+html [div.rb-slides div.layout-wrapper] {
	background: red;
}

<!--[if gte IE 8]>
<style>
div.rb-slides div.layout-wrapper {
	background: red;
	}
</style>
<![endif]-->

/* All IE versions, including IE8 Standards Mode */
div.rb-slides div.layout-wrapper { background: blue }

Open in new window

polaatxAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

twohawksCommented:
What I have had to do is use an isolated stylesheet for ie less-than 9 browsers.
I put everything in the code example.


background {
   filter: alpha(opacity=30);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
   -moz-opacity: 0.3; 
   opacity:0.3;
}
	/*  THESE ARE In A SEPARATE "styIElt9.css" -only way to isolate them from IE9 */
	/* For IE 5.5 - 7
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); */
	/* For IE 8
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30); */

/* In the html doc I place this just after the links in my head section

<!--[if lt IE 9]> 
	<link href="styIElt9.css" type="text/css" rel="stylesheet" /> 
<![endif]-->
<!--  -->
*/

Open in new window

0
twohawksCommented:
I hope that was clear enough.
In my example I have a 30% opacity set.  It works in all browsers I tested (about 15 of 'em, including IE 6 thru 9, and various of ff, safari, chrome, opera, from xpsp3)

 - the background css is in my stylesheet

- the conditional styles in the /*/ are placed in the styIElt9.css

- then in the head section, just below my link tags, I have the conditional statement you see there.

You can see my usage/example over at ancestralvoice.org, click on a feather to any page, and scroll to teh bottom for the navigation menu.
0
polaatxAuthor Commented:
Hello, thanks for the resonpse.

So are you saying this part:

background {
   filter: alpha(opacity=30);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
   -moz-opacity: 0.3;
   opacity:0.3;
}

can stay in my main sheet and will cover IE 9 and all other non-IE browsers?

And this part:

      /*  THESE ARE In A SEPARATE "styIElt9.css" -only way to isolate them from IE9 */
      /* For IE 5.5 - 7
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); */
      /* For IE 8
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30); */

Has to go inside a separate sheet, which is linked to this way:

<!--[if lt IE 9]>
      <link href="styIElt9.css" type="text/css" rel="stylesheet" />
<![endif]-->
<!--  -->

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

twohawksCommented:
YES ;^)

Oh, and you do not need the blank comment (inserted by accident) <-- -->
0
twohawksCommented:
Wait, there appears to be an error (not sure how, but I had it commented out...)

It should look like this...

      /*  THESE ARE In A SEPARATE "styIElt9.css" -only way to isolate them from IE9 */
      /* For IE 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
      /* For IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30);
0
polaatxAuthor Commented:
Yes, I noticed the stuff mistakenly commented out.

I found out my template already links to a "lt IE9" CSS sheet called "defaults-ie.css". Here's what is looks like in the page source:

 page source
I put the code in it like this:

 defaults-ie.css

The code looks good in Chrome.

But doesn't work in Firefox 3.6.23.

Can you see it in your version of firefox?

Also my windows machine just went down. I can't check IE.

Can you see it working in IE?

0
polaatxAuthor Commented:
I am in +3.3 GMT time zone - 10.5 hours ahead of Pacific time zone. It's 3 am here. I will check your response in the morning.

Thank you for your help.
0
twohawksCommented:
2 things...

1) ---------------
There's a quotation-mark missing on the last style (again, my bad copy/paste)...

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30);

should be

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
--------------------------------------------------------------^

2) --------------------
The styles in the intended style sheet (for the new code) should only contain styles for IE versions less than 9. So if that stylesheet I see there has styles for all ie versions, then your new code does not belong in there.
...
....because those styles would then be applied if "defaults_ie.css' is "otherwise" called, which it appears could be its intended use. You do not want this code called if we are here with IE9, and I do nto presume to know where or when else that style-sheet may be called into play, but its name clearly indicates "all ie browsers", so you need to be mindful about this.


To elaborate...
We may have a situation where a page may need to serve different styles based on which version of IE is being used.  Some may overlap, but others may need to target different versions.

 To deal with this we need to create a logical cascading flow that allows each version to get what it needs, and nothing that it doesn't, without negating styles set during the "cascading style application sequence".

In the simplest terms.....

link   mystylesheet.css   <--  my essential styles

link   default_ie.css   <-- all IE versions eat here. styles in here will override or add to my essential styles if I am visiting with any ie browser

link   styIElt9.css     <-- any ie version less than 9.  styles in here will override or add to my essential styles, and any styles picked up generally by any ie browser from the previous default_ie.css. So if I am here with IE5,6,7,8 these style will apply

link   styIElt7.css     <-- any ie version less than 7. ...now here I apply the lowest common denominator, styles for ie 6 and under.  NOTE that if I place this higher (INCORRECT) these styles will be overridden by styles intended only for higher versions of IE - not what we want.

-----
It could be done a lot of differnt ways considering all and/or/not operators are available, and you can also nest conditional ie comments - its very versatile.


So keep a keen eye on your cascade sequencing.  I do not think it wise to place these styles in with a general ie style sheet (default_ie.css), as this is not the focus of the new styles you are adding.  Just because you placed them in a conditional comment, limiting this particular call ....although it may work, you could end up shooting yourself in the foot down the line.  The focus here is specifically for "less-than-ie9" ie browsers.

Lastly.  keep in mind, since this type of coding is native to IE, and to strict coding practices, this is the best way to build code that accomodates the IE hassles without resorting to hacks.  And by "build" I literally mean that over time you will have built solid reliant conditional styling sheets that you can universally apply  in your website projects as you develop your skills and assets.

Talk to you tomorrow ;^)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
twohawksCommented:
Okay, I have just looked over the page a bit and I am thinking...

...once you get the styles properly syntaxed and placed, then if its not working you are going to have to consider delving into a developer toolbar (like firbug, dragonfly, ...whatever your browser offers) and observe how the styles are being dynamically affected.   I am not observing the styles being applied as expected, and not being steeped in the project it would take me some time to become familiar with the exact application (you got handfuls of css and js heaped in there, and I only got so much time ;^).
0
polaatxAuthor Commented:
Hello, I am a bit  confused and like you short of time. I've already paid another person to fix the hovers for me in this page: http://leadinc.no/drupal7/commercial_architectural_projects_by_lead_inc_husnes_norway but translucency in those hovers don't work in IE either.
I am thinking perhaps the order of pages would fix this, although if you look at my source, the order looks correct to me and fits the scenario you describe above.

LEt me ask you this: what if instead of translucency, I just want solid color. To which sheet I should add that - to my main sheet or the top IE sheet ?

Here's my setup as provided by the people who built the template, which I assume also know what they are doing.

<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="/css/defaults_ie.css?lsphhz" media="all" />
<![endif]-->  ---THIS PAGE INCLUDES EVERYTHING FOR LESS THAN ie9. there is no sheet for all IE defaults. Just less than 9.

@import url("http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/all.css?lsphhz");</style>  ------ THIS IS WHERE MY CODE IS FOR CHROME AND FIREFOX. WORKS IN CHROME BUT NOT IN FIREFOX 3.6.

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/ie/fix-ie6.css?lsphhz" media="all" />
<![endif]-->

<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/ie/fix-ie7.css?lsphhz" media="all" />
<![endif]-->  ARE YOU SAYING THIS ORDER IS INCORRECT. THAT [if IE 7] SHOULD COME BEFORE [if IE 6]  ?


0
polaatxAuthor Commented:
This is the part that really amazes me. I put in the following code in default-ie.css (which is really less-than IE9 sheet on my template.

div.rb-slides div.layout-wrapper {  /* applies to all text divs, regardless of location on the slide ...  */
background:
      /*  THESE ARE In A SEPARATE "styIElt9.css" -only way to isolate them from IE9 */
      /* For IE 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
      /* For IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";

}
div.rb-slides div.layout-wrapper {
background-color:gray;
}

Note the second proprety. I am just telling it to make background color gray. Guess what? Nothing happens! I don't get it.

I am reading your posts again in case I am missing something.

0
polaatxAuthor Commented:
twohawks,

I lined up my css sheets the way you recommended, with  <!--[if lt IE 9]>
 pointing to defaults-ie.css, appearing first, followed by sheets targeting individual versionsion from higher version to lower, 8, 7, 6.

The result is that sheets targetting individual versions work. At least IE8 works. I don't have access to IE 6 and 7.

 But nothing in <!--[if lt IE 9]> defaults-ie.css works.

For example, putting

div.rb-slides div.layout-wrapper {
background-color:blue;
}

in defaults-ie.css doesn't do anything. But putting it in fix-ie8.css does work.

See my source attached.  source.htm
0
polaatxAuthor Commented:
Could you please explain this:

background {
   filter: alpha(opacity=30);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
   -moz-opacity: 0.3;
   opacity:0.3;
}

Background is a property. Why do you have it in place of a selector.

I am trying to put a translucent property on a div. The following only changes the text, not the background.

div.rb-slides div.layout-wrapper {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; */
}

This doesn't work:

div.rb-slides div.layout-wrapper {
 background: -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; */
}

my question is how do I tell it to apply the -ms-filter to the background.
0
twohawksCommented:
Just got in.  I will be looking at this this within the hour and come back with some answers.

However, briefly...

1) Ordering...
Ordering looks ok except I would move the [if lt IE 9] below import url.

Essentially the logic goes...
 - deploy any base 'link'ed stylesheets, most primary/fundamental first, etc
 - then deploy conditional 'link'ed stylesheets
...all you gotta do is follow the cascade sequence in your mind so it makes sense, and your probably good.

2) Application
What I am going to be trying to look at is if  .rb-slides  .layout-wrapper  are in any way being affected dynamicly via js so that any applied styling via '.css' is being over-ridden  Certainly the styles within those so-classed tags are, however, those ones don't overtly reveal if they are being dynamicly affected ...I will have to step through thte code (or something).

0
polaatxAuthor Commented:
Hi twohawks,

1) ordering: Finally managed to put all.css above the conditional elements.

2) you might be right about js wiping out css. When i put my mouse on the text and a new slide comes on for  a second I do see a white background.

0
polaatxAuthor Commented:
Darn it - you were right !!!!

This test now works:

div.rb-slides div.layout-wrapper {
background-color:blue;
}

My new ordering is attached.
<style type="text/css" media="all">@import url("http://leadinc.no/drupal7/modules/shortcut/shortcut.css?lt48cq");
@import url("http://leadinc.no/drupal7/modules/toolbar/toolbar.css?lt48cq");
@import url("http://leadinc.no/drupal7/sites/all/themes/layoutstudio/css/defaults.css?lt48cq");
@import url("http://leadinc.no/drupal7/sites/all/themes/layoutstudio/css/leadinc-superfish.css?lt48cq");
@import url("http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/all.css?lt48cq");</style>
<style type="text/css" media="screen, projection">@import url("http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/screen.css?lt48cq");</style>
 
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/defaults_ie.css?lt48cq" media="all" />
<![endif]-->
 
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet" href="http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/translucency_ie.css?lt48cq" media="all" />
<![endif]-->
 
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/ie/fix-ie8.css?lt48cq" media="all" />
<![endif]-->
 
<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/ie/fix-ie7.css?lt48cq" media="all" />
<![endif]-->
 
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="http://leadinc.no/drupal7/sites/all/themes/layoutstudio/MYTHEME/css/ie/fix-ie6.css?lt48cq" media="all" />
<![endif]-->

Open in new window

0
polaatxAuthor Commented:
Okay, per your instructions, I have created a second sheet called translucency.css (the equivalent of your styIElt9.css) with the  [if lt IE 9] condition to contain all the new code for translucent backgrounds that apply to all IE browsers below 9.

Now your code. First I put the following part in the all.css to apply to all browsers:

background {
   filter: alpha(opacity=30);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
   -moz-opacity: 0.3;
   opacity:0.3;
}
 
correct?

Like I asked earlier, how do I apply the above properties to the BACKGROUND of div.rb-slides div.layout-wrapper ?  You have "background" in place of the selector.

Then, according to your instructions, i put this

/*  THESE ARE In A SEPARATE "styIElt9.css" -only way to isolate them from IE9 */
      /* For IE 5.5 - 7
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); */
      /* For IE 8
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30); */

in my transulency.css. But not sure how to tell state that these apply to the background of div.rb-slides div.layout-wrapper

Waiting for your reply. Thanks a whole bunch. I am learning a whole lot.
0
polaatxAuthor Commented:
HI twohawks:

Please ignore my earlier questions. I figure them out.

The only remaining issue is that at least on my laptop (win 7, IE 8) the text box has a white box initially as each slide loads and then becomes transparent after about a second.

Do you see that?

Another question: how do you check your stuff in other versions of IE ? My understanding is that it's only possible to have a single version of IE on a windows installation. There was a very complicated hack a few years back. Has anyone come up with a simpler way?
0
twohawksCommented:
=============
"Background is a property. Why do you have it in place of a selector. "
 - it was a communication (indicator) where I then placed the code, not intended as part of the code.

What this means is... you apply the styles to your intended class, id, etc for the targeted tag.

Sorry about that confusion.

==============
BTW, I see the error copied in your "according to your instructions, i put this" response:
Dont do this...
/* For IE 8
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30); */
Its this
/* For IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
That's two corrections...
 - move the closing comment tag
 - add the clsoing quote

================
How to apply to div.rb-slides div.layout-wrapper

div.rb-slides div.layout-wrapper {
    styles in here
}

...Again, I'm really sorry about that 'background:' annotation throwing off the communication.

===============================

For I.E. differnt versions, try finding a copy of "IE Collection" for versions 5-8. Possibly find a copy of it here (http://finalbuilds.com/iecollection.htm), but I cannot verify that package - look around to be sure.

I am going to take a look at things now, and then come back ;^)
0
twohawksCommented:
Try this...

Change this
div.rb-slides div.layout-wrapper

to this
div.rb-slide div.layout-wrapper
0
twohawksCommented:
Lets make this more helpful..., for clarity...
I mean to change the style assignment (or label) in the style sheet...  

The issue there is,
div.layout-wrapper  is a child directly contained in div.rb-slide, NOT directly contained within div.rb-slides.  The way I see it written ist will not work because there is no direct flow from 'slides' to 'wrapper' ;^)

But there seems to be another issue... I think I am observing the opacity being dynamically reset.  I don't know if it has to do with that I am unable to properly process my dynamic changes without fully downloading and troubleshooting your website on my computer, or what... so this may or may not be an issue.

I apologize as I only have limited time to dive in and offer pointers, I do not have the time to take the project on for in depth troubleshooting.  Hopefully the pointers are helping you learn how to tackle that ;^)

0
polaatxAuthor Commented:
A lot of things were discussed in this thread. I think the main thing that solved the problem was putting the conditional IE sheets AFTER the main sheets and in row from those targeting higher versions to lower versions.

Many many thanks to twohawks for his great instructions.
0
twohawksCommented:
Glad this helped you, polaatx.
Thank you for the points ;^)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.