There are many working solutions to display transparent pngs correct in IE, but all these solutions will not work if the image is in a rotated container.
I' ve tried
img{
background: transparent;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}
to work around IE' s transparent png bug, but it does not work.
Ive created a show case at .
http://jsfiddle.net/s__a/Hmyc2/
Please be shure you visit this with Microsoft Internet Explorer 7, rotation is not implemented there for IE8.
Can anybody help to display the rotated image correct in IE7/IE8?
Best regards.
Solid Background Only Solution Found
It took some digging around to piece it together. My first lead was this site, which yielded the following change of code. Actually, I just now noticed, what I have below is the same code you said didn't work in your question, but yet it does for me... recheck my fiddles and see if it works for you now. Note that in this fiddle it worked for IE7 but not IE8 (the img does not rotate).
.test-1{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF)";/* IE 8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */
clip:rect(0px 276px 267px 0px); /* top,right,bottom,left */
}
So a little more digging and a Stack Overflow answer helped make a fiddle work for IE8 too! The IE8 final fix was that the item being transformed with the Matrix filter needed to have a z-index added in order to correct the bug of it not rotating the child img element.
However, this "fix" is apparently still only a partial one. The issue on the rotated element remains at present for any transparency to the background itself, because if the alpha value for the gradient is set to transparent #00FFFFFF then it only functions on the non-rotated element.
Related
I created www.studycraft.net but then noticed that in Internet Explorer the shadow that goes across the background is at an angle (In Safari, FireFox and Chrome it's a straight vertical edge). I asked on the theme's developer's site how can I make it straight and he had told me to add this to my custom css box:
.angled-background {
transform: initial;
}
(this may have fixed it for Chrome and/or Firefox, I had only really tested it with Safari and IE before having this "transform" property set)
This does seem to be the right element because this is where he fixed another issue where this shadow wasn't always (certain window sizes) wide enough to cover the title and made that text hard to read against the non-shadowed background - my .angled-background actually looks like:
.angled-background {
min-width:1250px;
display: block;
transform: initial;
}
But in any case, this doesn't seem to fix it for IE - the shadow stills has an angle and it even cuts back in at a certain window sizes to make a strange looking corner to the shadow and then looks really bad. Here's a pic:
thanks for any help.
I heard back again from the theme's developer and he provided the solution - it should be "transform: none" instead of "transform: initial". So the correct code is:
.angled-background {
transform: none;
}
Here is a fiddle:
http://jsfiddle.net/e80fen4p/2/
EDIT: You can just highlight all of the result div and you'll see the colors change back to what they should be. I'm guessing there isn't a fix for this. If its that easy to "fix" it just by highlighting it, it probably isn't a problem with the code.
Basically it works as intended in IE11 and chrome and Firefox, but if you do this fiddle in IE10, you'll notice when the child div slideToggles, the background color starts over in the child div rather than extending to include the child div as it expands.
If you try this fiddle in IE10 you should see what I mean. It will look normal in all other browsers.
I'm wondering if there is anything I can do to modify my CSS code to make it work properly in IE10 also.
I've tried:
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #A4A4A4 100%);
but it still doesn't do anything different in IE10.
The normal way I use it is
background: linear-gradient(#FFFFFF, #A4A4A4);
which works in IE11 and all the other browsers. It seems its just IE10 that is throwing me through a loop.
The weird part is, if i open Developer tools and highlight any of the div's,the colors reset and look like they are supposed to look when the div is expanded. That, to me, says its clearly a bug with how IE10 is displaying it on its first run of the code.
Anything I can do or is it just IE10 people are gonna see it slightly different. This bug doesn't stop my code from working or the webpage from being useable just makes it look weird.
I added:
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
and it started working.
its not perfect and it isn't exactly the same, but at least its working.
The difference is when its minimized (slideToggled) it only shows the top of the div's colors, it doesn't show the full gradient in the minimized div but that isn't a big deal, just cosmetic. It's better than what it was doing.
So i have this fiddle: http://jsfiddle.net/aA9Rm/1/ . It works just fine in firefox, but i have some issues with it in chrome, and i can't understand why. In firefox if i move the mouse after the hover in the workhover container it works fine, doesn't do anything, but in chrome if i try to click or move an inch, it starts to move (shake) and I don't want that.
I use 3D rotations, from CSS3,
-moz-transform: rotateY(-90deg);;
-webkit-transform:rotateY(-90deg);
transform:rotateY(-90deg);
Solutions anyone?
I think you encounter the same bug from this question :
CSS Flip Transition Between Two <div>'s
It looks like a chrome bug where the div you're trying to rotate is rotating a bit too much. I can fix your jsfiddle on Chrome by changing this CSS (see the webkit degree) :
.cube:hover{
-moz-transform: rotateY(-90deg);
-webkit-transform:rotateY(-89.9deg);
transform:rotateY(-90deg);
}
It's quite hacky but I never found any clean solution.
You can also use pointer-events: none; property in some way to make it works.
This looks great in IE9, Firefox and Chrome but in IE8, it's all jacked up looking. Any ideas on this one? I am on WordPress using Thesis Themes. I am using custom.css for my edits.
My site is: http://www.7637olympia.com/
Can you suggest how to make it work with IE8 as well as the other browsers?
I thought that since IE7, there was support for the css rule filter:alpha(opacity=x); to avoid using semi-transparent pngs. Is that not the case?
In your site, you would use:
.custom #page {
background-color: #000;
filter:alpha(opacity=50);
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px 10px 10px 10px;
padding-top: 5px;
}
As I understand it, IE will ignore the rgba value and use the two higher rules to get a similar effect.
The one downside to using opacity on an element (in newer browsers as well) is that it set it to the entire element, not just the background color, so all text and borders, etc are semi-transparent. But I would at least try out the above to see if it's close enough.
Remember: the only reason people don't upgrade to higher versions of IE (or move to FF or Chrome) is because we go to such great lengths to ensure the design looks good in these obsolete browsers. If enough sites look like dog crap, they will eventually get the idea that it's not the sites, it's their old browser. So don't lose too much time and energy supporting the already-too-slow transition from the bad-old-days of IE pandering.
To simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color (alpha channel is the first pair in the value of HEX):
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff');
or use a .png image of size 1x2 instead of 1x1.
because Internet Explorer 8 doesn't perform the repeat of a 1x1 pixel semi-transparent background image correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency
See this link
IE8 doesn't support rgba colors. If you want it to work in IE8, create a small png (any other size than 1x1 pixel) with same opacity and apply it as a background to the div. Or you can use an IE8 only style sheet and set a different background color other than white.
I am trying to to overlay some rotated text over my images but I am having some difficulty with it. Here is my code without all the jQuery: http://jsfiddle.net/vCbcz/4/
Issues:
The span does not align with the div after the rotation
The background transparency isn't showing up in Internet Explorer even though the span is positioned and I have added filter: alpha(opacity = 30); to my css.
EDIT: I would like the spans to look like http://jsfiddle.net/vCbcz/6/ except with rotated text. Please don't tell me to put the text in a seperate container.
Setting left:-25px; on the spans fixes it for me in Firefox. See here.
Edit
With regards to IE, the reason your alpha filter isn't being applied is because your second filter: is overwriting your first. If you want them to both be applied, you put them in the same filter: separated by a space like so:
filter: alpha(opacity = 30) progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
I noticed that in IE the left:-25px; makes it worse so perhaps you'll have to do some conditional comments or CSS hacks to get around it. (Icky!)
Just a warning, this doesn't work in Opera at all.
Edit 2
Here's my changes with fixing IE's bugs and supporting Opera and possibly other browsers if they support the CSS3 transform property.