?
Solved

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

Posted on 2011-10-14
23
Medium Priority
?
279 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:polaatx
  • 12
  • 11
23 Comments
 
LVL 8

Expert Comment

by:twohawks
ID: 36971182
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
 
LVL 8

Expert Comment

by:twohawks
ID: 36971211
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
 

Author Comment

by:polaatx
ID: 36971434
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 8

Expert Comment

by:twohawks
ID: 36971587
YES ;^)

Oh, and you do not need the blank comment (inserted by accident) <-- -->
0
 
LVL 8

Expert Comment

by:twohawks
ID: 36971595
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
 

Author Comment

by:polaatx
ID: 36971770
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
 

Author Comment

by:polaatx
ID: 36971777
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
 
LVL 8

Accepted Solution

by:
twohawks earned 2000 total points
ID: 36971914
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
 
LVL 8

Expert Comment

by:twohawks
ID: 36971961
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
 

Author Comment

by:polaatx
ID: 36972540
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
 

Author Comment

by:polaatx
ID: 36973170
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
 

Author Comment

by:polaatx
ID: 36973630
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
 

Author Comment

by:polaatx
ID: 36973644
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
 
LVL 8

Expert Comment

by:twohawks
ID: 36973656
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
 

Author Comment

by:polaatx
ID: 36973771
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
 

Author Comment

by:polaatx
ID: 36973791
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
 

Author Comment

by:polaatx
ID: 36973822
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
 

Author Comment

by:polaatx
ID: 36974374
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
 
LVL 8

Expert Comment

by:twohawks
ID: 36976265
=============
"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
 
LVL 8

Expert Comment

by:twohawks
ID: 36976269
Try this...

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

to this
div.rb-slide div.layout-wrapper
0
 
LVL 8

Expert Comment

by:twohawks
ID: 36976320
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
 

Author Closing Comment

by:polaatx
ID: 36999876
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
 
LVL 8

Expert Comment

by:twohawks
ID: 37003847
Glad this helped you, polaatx.
Thank you for the points ;^)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

840 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