Transparent Background in Internet Explorer - css

I set a transparent background in a div element. It's child element don't have a transparent background.
I have:
background: rgba(181, 182, 183, 0.6);
For IE, i tried below:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B5B6B700, endColorstr=#B5B6B700);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B5B6B700, endColorstr=#B5B6B700)";
What would be the correct hex value? Im not sure on the last two digits.

Try #MatTheCat's answer here for an IE transparent background fallback: CSS background opacity with rgba not working in IE 8
Looking at your current code, if you are having trouble getting the background to be transparent, you may need to add zoom: 1 in order to trigger hasLayout in IE.
Try this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B5B6B700,endColorstr=#B5B6B7000);
zoom: 1;
More info on hasLayout.

Related

How do I differentiate between an old browser and new browser for a style in CSS

The issue I'm having is that I don't know what they mean by a style rule that sets a font color to white for older browsers and white with 50% opacity in newer browsers and removes the underlining from the link text.. I didn't realize there was the potential to differentiate in the first place.
Update: How would I go about making it so that every time a mouse hovers over a text link, that it would display an image in place of a bullet?
Use fallback styles. Write the universally understood property first, then the newer version of the property, which the modern browsers will use but the old browsers will simply ignore.
Example: set color to white for all browsers; then set color to white with 50% opacity for browsers that understand it.
.yourclasshere {
color: #FFFFFF; /* standard syntax understood by all browsers */
color: rgba(255,255,255,.5); /* new feature, ignored by old browsers */
}
Not sure how to handle the request to remove the underline in newer browsers. AFAIK all browsers always understood text-decoration. Maybe you could use parent > child for a selector.
In that specific case you could use a fallback like:
.selector {
color: #fff; /* white */
color: rgba(255, 255, 255, 0.5); /* 50% opacity white */
}
So, as CSS rules are interpreted from top to bottom, modern browsers will set the color to transparent white. Old browsers won't be able to apply that rule since they don't support RGBA colors, so #fff will prevail.

Highlight Background No Transparency in Opera

I have some CSS that changes the background color when you highlight any text on the page:
*::selection {
background:#083875;
color:white;
}
*::-moz-selection {
background:#083875;
color:white;
}
The problem is that the background color of this text (on highlight) is slightly transparent. Is there any way to make the background completely solid using only css?
This issue is occurring in Opera 25.
In Opera 25, you can't control the opacity of the selection of text.
Even forcing the opacity using the rgba(0,0,0,1) produces a semi-transparent background.
*::selection {
background: rgba(255,0,0,1);
color:white;
opacity: 1;
}
http://jsfiddle.net/j9u9qx8x/1/
Test results in Opera 25
Perhaps try submitting a support ticket to the Opera development team to see if they can allow this functionality. It makes sense that you should be able to override the transparent effect by forcing the opacity in the rgba() color syntax.

CSS Opacity Box

Alright So here is my CSS style sheet.
#mainheader,#content{
opacity:0.35;
text-align:center;
background-color:#000000;
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
And as you can see it's a box that's see through, but has a small black background making text look fuzzy. Example.
http://i.stack.imgur.com/18dOZ.png
When I take away that background color I get more clear text like this...
http://i.stack.imgur.com/ixLva.png
Alright So what i'm trying to say it what can I write to have that text above that box being very clear text and not with it's dark opacity.
If you want to use CSS3, try:
background-color: rgba(0,0,0,0.35);
instead of opacity.
http://jsfiddle.net/vsZtM/
References from W3.org about RGBA:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color
http://www.w3.org/wiki/CSS3/Color/RGBA
Instead of opacity, change background of containers with an alpha channel:
#mainheader,#content {
background: rgba(0,0,0,0.35);
}
Where last param is the opacity.
Opacity changes the opacity for the entire element, while background:rgba(0,0,0,.35) will change only the background color.
You should try using rgba instead of opacity like so:
background-color: rgba(0,0,0,0.35);
Note: this is CSS3 and will only work in IE9 and up, so for other versions you should provide a fallback like so:
background-color: #000;
background-color: rgba(0,0,0,0.35);
You can set the background-color as an rgba value, and leave off the opacity in your CSS statement. For example:
#mainheader,#content{
text-align:center;
background-color: rgba(0, 0, 0, .35);
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
This will let your text stay fully opaque, while your background is semi-transparent. As a note, however, this will not work in Internet Explorer 8 and below -- it will be a solid background.

Transparent div in IE

How can I display a div with an alpha background in IE > 7.
I've got this css code for all browser
background-color: rgba(102, 102, 102, 0.30);
but it doesn't work in IE 7,8. Don't test it in ie 9 or 10 actually.
Do someone know how to make it work, It's for put a transparent div over an image
I found the best cross browser option for opacity is to use a 30% transparent png as background of the top div
You can create another div only for background(same size as your div, position abolute etc) and then set it color + cross-browser transparency like
.transparent {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}

CSS gray text opacity and Firefox color issue

I'm using following jQuery function to change the opacity of text (it's color: #999999)
$('.small_buttons').css('opacity', 0.3);
The effect looks good in Chrome or even Internet Explorer 8, but in current version of Firefox (3.6.10) this text gets really strange greenish colour, instead of nice pale gray.
Screenshots:
Chrome:
Firefox:
Help appreciated!
Update:
example: http://jsfiddle.net/YnDFr/1/
It appears it's because the element has no background, or specified as transparent. Try to add it the same background as its container.
fyi: I had the same issue with FF 3.6, found the following solution, which actually works on a variety of browsers excl. IE < 9.0;
just use the following syntax: color: rgba(r,g,b,opacity);
i.e: color: rgba( 153, 153, 153, .5) ;
this results in color: #999999; and opacity: .5;
no need to apply background-color if you're text is on a transparent DIV. Most modern browsers, even IE 9.0 have support for the RGBA() color definition

Resources