I have following CSS snippet to prepare a rubber stamp effect which works fine in Google chrome, Firefox but not in IE 11.
Any idea what mistake I am doing here. In IE11 it looks black.
.stamp {
position: relative;
display: inline-block;
color: red;
padding: 15px;
background-color: white;
box-shadow:inset 0px 0px 0px 10px red;
transform: rotate(-25deg);
text-align:center;
}
.stamp:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url("http://i.imgur.com/5O74VI6.jpg");
mix-blend-mode: lighten;
}
<p class="stamp"><span>COD</span><br>5c84b19c98b21f292c9d086f
</p>
Not supported in ie. Your best bet may be to include the working css as is, then in a ie-specific media query, don't display that css and have a fallback display.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
#supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
As the comments have mentioned, mix-blend-mode is not supported in IE, and not supported on Edge too.
You could check this from:(1)https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode (2)https://caniuse.com/#search=blend
In my opinion, according to your code and example, there may be no perfect solution for it if you just want pure CSS.
But my suggestion is that you could use Javascript polyfill to try to achieve your requirement. For more, you could refer to this link:https://stackoverflow.com/a/32614511/10487763
Related
These media queries are working well in other browsers except IE10, In this situation what should I do? How can I achieve this task?
#media screen and (max-width: 575.98px){
.layer-hover .plus, .layer-hover-2 .plus{
font-size: 2.5rem;
}
.layer-hover a, .layer-hover-2 a{
width: 70%;
padding: 5px 0;
font-size: 10px;
}
}
A few resources here on #media usage on Internet Explorer 11 and under.
Targetting Internet Explorer Best Practices
CanIUse #Media (Shows known issues with IE10)
Browser Compatability Best Practices.
IE10 Specific Styles (Some techniques)
IE10 CSS Hacks
IE10 vs Media Queries
Some people have been known to try tricks like below as well with success, but IE10 can be unforgiving. Note the prefixes and see the CanIUse Knowledge Objects.
#-ms-viewport {
width: device-width;
}
If that doesn't do the trick, you could try removing the screen parameter
and styling specifically for IE10 like so.
Per this article on targeting IE10, this little workaround exists since conditional comments aren't recognized since IE10.
#media (max-width: 575.98px)[data-useragent*='MSIE 10.0']{
.layer-hover .plus {
font-size: 2.5rem;
}
layer-hover-2 .plus[data-useragent*='MSIE 10.0'] {
font-size: 2.5rem;
}
.layer-hover a[data-useragent*='MSIE 10.0']{
width: 70%;
padding: 5px 0;
font-size: 10px;
}
.layer-hover-2 a[data-useragent*='MSIE 10.0'] {
width: 70%;
padding: 5px 0;
font-size: 10px;
}
}
Another possible hack you could try is mentioned on Mediacurrent with lots of success stories.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// IE10+ CSS here
}
I am having a confused day.
If you look at at this page, and view its source code: http://tinyurl.com/npawot5
You will realise that it has a CSS in its header to deal with a single form field.
The problem is that before making modifications to the CSS, I was seeing an image on the page. But now, the image is lost in the background, and you are only seeing the form field in Chrome etc, but not internet explorer.
So no image in any browser, and no form in internet explorer.
Anyone has an idea what can be causing this mess?
Thanks
#bv_Image1 {
overflow:hidden; <--remove
}
img {
opacity: 0; <--remove
}
Internet explorer versions 9 or less have weak or none support for rgba colors. Use hex colors instead. Be sure that you have browser and document mode compatible (press f12 in internet explorer and see).
If you want to create gradients for all browsers (again ie8 or less have weak or none support) use this link and be sure to enable ie9 support.
collorzilla
You can't nest CSS the way you are. And you can't do the :after pseudo selector on &. It seems like you may be trying to use compiled CSS, but it is not being parsed.
.coming-soon {
height: 105px;
left: 50%;
margin-left: -172px;
margin-top: 35px;
overflow: hidden;
position: absolute;
top: 30%;
&:after { /* This is not allowed and shouldn't be nested here */
border-radius: 100%;
box-shadow: 0 -10px 10px 0 rgba(0,0,0,0.3);
content: "";
left: 15px;
position: absolute;
height: 10px;
top: 109px;
width: 320px;
}
}
This question already has answers here:
How do I make background-size work in IE?
(8 answers)
Closed 9 years ago.
I'm using this class and this id (for instance) to add a picture on one div :
.icones {
background: transparent url('../contents/homepage/60/icones.png') no-repeat;
display: inline-block;
width: 50px;
height: 48px;
background-size: 60px;
}
#contact {
background-position: 0px -60px;
}
With Chrome, everything is ok, all looks great and all properties are shown in the element inspector, but in IE, there is a problem.
On inspecting the page with a developper tool on IE, I saw that "background-size" doesn't appear.
I know that it's that problem that gives me the trouble because when I hide it on chrome I have the same page than in IE.
So my question is: How can I force IE to apply this background-size?
THANKS!
EDIT :
So even with the filter, it doesn't seems to work:
.icones {
background: transparent url('../contents/homepage/60/icones.png') no-repeat;
display: inline-block;
width: 50px;
height: 48px;
background-size: 60px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../contents/homepage/60/icones.png',sizingMethod='scale')";
}
#contact {
background-position: 0px -60px;
}
Solution :
Edit the pictures size manually and forget the background-size. All is okay!
For IE you have to use a specific css filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.png',
sizingMethod='scale')";
Or use jquery to achieve the effect, like it is explained in this link.
I write the css top for mozila and chrome.
-moz-top : 20px;
-webkit-top: 75px;
But it show me error "Unknown property name".
I'm a little late to the party but this did the trick for me:
/* this sets standard, which gets IE and others (all except chrome and mozilla) */
#EXAMPLE{
top: -10px;
}
/* this gets mozilla */
#-moz-document url-prefix() {
#EXAMPLE{
top: -10px;
}
}
/* this gets chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#EXAMPLE{
top: -5px !important;
}
}
Just use top
It's supported by all browsers
My CSS code below is working fine in Chrome, but isn't working in Firefox. I think it might just be a syntactical difference but I can't figure out what is going on. Are there any mistakes in my CSS code below?
#framed_source {
background-color: white;
display: block;
height: 97%;
width: 100%;
padding: 0px;
}
#grey_cover {
position: fixed;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
background-color: #3F3F3F;
/* Transparency is applied through the transparent class */
}
#popup_window {
background: #D0E9F3;
visibility: visible;
border: 1px solid #666;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
padding-left:20px;
}
.with_frame {
position: absolute;
width: 600px;
}
#popup_window_content {
overflow: auto;
color: #1F313E;
font-family: Calibri;
max-height: 200px;
}
.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;
}
Basically I have a popup window that is displaying on top of an iframe. In Chrome it does this correctly, in FF it displays the popup beneath the iframe. Any ideas? I think it has to do with absolute / relative positioning.
Picture of Firefox -- Incorrect CSS
Picture of Chrome -- Correct CSS
I also created a JSFiddle for this CSS with the corresponding HTML. I am trying to get the blue box appearing below the frame to appear centered in front of the frame.
So, in the end this is what was wrong.
Having <iframe> above the popup in the html structure somehow messed up with the positioning of the popup.
Since html and body were just hanging out there, they didnt stretch all the way to the bottom and restricted iframe from going further as its height was set with percentage.. ( This is something i do remember fixing at some point.. but it was already past midnight when i was checking into it, so who knows where that disappeared :D )
http://fiddle.jshell.net/CH6ny/6/
I don't exactly know why, but when I upgraded to Firefox 5 the issue resolved itself. Thank you everyone for all your time anyway!
To get something to appear on top of another, you will need to set the z-index values and I think also set the position.
For the element that you want to be on top, set the z-index value like this:
#idOfTopElement {
z-index: 1;
}
#idOfNextElement {
z-index: 2;
}
You might need to add position: relative; or position: absolute; to one or both of those depending on what position you are using, but I can't remember for sure.
If you are not completely against a javascript/jQuery solution, here is an option that might work. I chose to do the top and left adjustments onload, but it would make more sense to do it when you call the creation of the popup_window:
http://jsfiddle.net/CH6ny/4/
It worked in Chrome, FF, IE, and IE quirks mode.