color transparent not working in IE - html

I can able to get this functionality in Firefox and chrome. but below code, text is displaying in IE. that text should not display.
<a target="_blank" href="#">edit</a>
<style>
a {
background: url("../images/edit1.gif") no-repeat scroll 0 0 transparent;
color: transparent !important;
}
</style>

Mostly IE 5-8 does not support the transparency property. But IE 9 will support it.
While searching for my blog i found the following method
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
And
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
I referred this in Blog 1 and Blog 2

Related

Transparency css for placeholder not working for mobile browsers

I want to make input fields with zero transparency for placeholder text
<input type="text" placeholder="Enter your name here" />
I used following css properties which fixed transparent in Firefox but it still shows text with transparency on iPhone and android browsers
i am using following css
::-webkit-input-placeholder { /* WebKit browsers */
opacity: 0.8;
-webkit-opacity:0.8;
-khtml-opacity: 0.8;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
opacity: 0.8;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
opacity: 0.8;
}
How can i make placeholder with 100% opacity for android & iphone browsers.
You can control your view in the mobiles or in any device through the "media query"
media Query : is used to define different style rules for different media types/devices.
for example for the iphone6 you can use this code to hide the transparency or to set any css rule you want for this screen size,
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* your style here */}
Update
You can use Important to set the rule and give it the priority, check the code below :
::-webkit-input-placeholder { /* WebKit browsers */
opacity: 1 !important;
}
I resolve transrency issue by using RGBA
Opacity was not working as it works for the whole element so i used RGBA
color:rgba(0,0,0,1);
::-webkit-input-placeholder { /* WebKit browsers */
opacity: 0.8;
-webkit-opacity:0.8;
-khtml-opacity: 0.8;
color:rgba(0,0,0,0.8);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
opacity: 0.8;
color:rgba(0,0,0,0.8);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
color:rgba(0,0,0,0.8);
}
sample fiddle http://jsfiddle.net/vbMw3/699/

Setting opacity of an element breaks scrolling of parent in Chrome

I am having a bug I don't understand at all and that I can't find an solution for on the web.
My setup is pretty simple: I'm having a container with various children. The container (marked red in the screenshot) has a fixed height and overflow-y auto. Scrolling works just as expected.
.card-details-container {
height: 500px;
overflow-y: auto;
}
But when I change the opacity of one of the contained children, it is suddenly broken:
.barchart .barchart-bars div {
opacity: .5;
}
I am only experiencing this bug in Chrome (41.0.2272.118). I have no idea why this would be happening. Any help is appreciated!
Try:
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
Also, check the borders.

Text rotation on Internet explorer [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS rotate property in IE
Can any one help here to rotate the text on IE- 8, IE -7 versions.
it is working on Chome, firefox, IE-9, but doesn`t have any results on IE-8, IE- 7.
BETA
css
a.beta_home{
position: absolute;
text-decoration: none;
top: 12px;
right:0;
margin-left: 0px;
font-size: 9px;
color:red;
border: 1px solid #fff;
display: block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
i wouldn't pref to do it in any browser cause they all render it very different.. but you could do it with javascript
Documentation
http://code.google.com/p/jquery-rotate/
Commands
$('#theimage').rotateRight(45);
$('#theimage').rotateLeft();
This would render it the same in IE 9, chrome, firefox, opera and safari cause its using a canvas object instead of turning the text by browser rendering
It will use the old codings for ie8, 7 & 6 Generate it here
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');
Working ex
IE 7&8 tested
Fiddle (margins need to be different in chrome and other browsers cant say why but it does)
If you dont know how to differ css trough out the different browsers see this link
My opinion
Beside all this i would recommend you make it as a picture (already rotated) using photoshop or if your dont have access to such programs use free (GIMP)
Try to use this online service:
http://www.useragentman.com/IETransformsTranslator/
It transform css3 rule
rotate(-90deg)
applied on div with WIDTH: 220px; HEIGHT: 70px;
to IE specific rules:
/*
* The following two rules are for IE only and
* should be wrapped in conditional comments.
* The -ms-filter rule should be on one line
* and always *before* the filter rule if
* used in the same rule.
*/
#transformedObject {
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=3.061515884555943e-16, M12=1, M21=-1, M22=3.061515884555943e-16, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=3.061515884555943e-16,
M12=1,
M21=-1,
M22=3.061515884555943e-16,
SizingMethod='auto expand');
/*
* To make the transform-origin be the middle of
* the object. Note: These numbers
* are approximations. For more accurate results,
* use Internet Explorer with this tool.
*/
margin-left: 71px;
margin-top: -78px;
}
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');
/* For IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

why won't this gradient filter work in ie8?

why won't this gradient filter work in internet explorer 8?? i am led to believe that it is supported from ie6+
filter:progid:DXImageTransform.Microsoft.gradient(starColorstr='#ccc',endColorstr='#fefefe',GradientType=0);
Please always use <!doctype html> to bring IE into (almost)-standards-mode
#ccc does not, what you expect;) Always use #RRGGBB, IE cant handle the shorhand.
Several filters in one ruleblock are not allowed. Your opacity-filter overrides the gradient filter.
Solution for filter:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e6cccccc",endColorstr="#e6fefefe",GradientType=0); with the first two digits being the opacity (range 255, from 00 to ff, so you need to rescale your 90% opacity accordingly -> E6)
Gradients and opacity are not supported by IE8.
IE has always been a nightmare for me too (and probably every developer here)
You have no doctype in your excample.
IE8 might require XHTML 1.0 Transitional as the Doctype to make margin:auto work as expected.
Using the following in your CSS to set opacity should render correctly:
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
/* IE 5-7 */
filter: alpha(opacity=65);
/* Netscape */
-moz-opacity: 0.65;
/* Safari 1.x */
-khtml-opacity: 0.65;
/* Good browsers */
opacity: 0.65;
I tested it and it works in IE7, IE8, IE9, FF, NS, Chrome, Opera, and Safari
For the centering of the div in IE8 (I assume that's what you want the margin:auto for) add this:
text-align:center;
For your gradient try this:
background: #008800; /* fallback for (Opera) */
background: -moz-linear-gradient(top, #CCC, #fefefe); /* Mozilla: */
background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#fefefe)); /* Chrome, Safari:*/
filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#CCC', EndColorStr='#fefefe', GradientType=0); /* MSIE */
Hope it works for you!
Best,
Cynthia

How to solve CSS background transparency?

all
As you can see in images i have gradient background (this is responsive layout) and i want to display testimonials on that.
the problem is, i want the transparent bg.
i have tried to use this
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
but its shows something like this is not my solution
How can i set testimonials bg same as in my web site bg.
Can semi transparent png can sole this or any other way to solve it ?
thanks in advance...
Try using rgba as a background. This gives you the option of background opacity. Here's a little calculator I use all the time to get hex to rgba http://hex2rgba.devoth.com/.
I'm not quite sure if I understand the question, but that's what you can use if you want semi-transparency. For full transparency, just use background: transparent. And it should work.
EDIT: I believe I understand the question more now. The reason that you were getting the result, is because you were setting the entire element to be at opacity 0.5, not just the background. If you use rgba like i suggested, you can set the background to be semi-transparent like this
background: rgba(238, 238, 238, 0.5);
try this one
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
or something like this
.transeffect {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}