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.
Related
Good day!
I am using the Bootstrap carousel on a project and I wanted to change the background color of the items and controls. By changing the background property of the CSS the results are perfect in Chrome, IE and Opera, but it does not work well in Firefox and in mobile browsers.
background : linear-gradient(to left, #f8f8f8 0%, transparent 100%);
My guess is that the problem is that they fail to render the 'transparent' color, because if I change it to anything else, it works fine (with that color). But I need it to be transparent because the background of the items is also a gradient and it wouldn't look right otherwise. My code also includes all the needed vendor prefixes.
This is how it looks (on Firefox and mobile it maintains its original 'dark-ish' color; it looks even worse when I hover it)
Thank you very much for your help!
Have a nice day!
EDIT: Someone requested that I add a fiddle - if you run it in Chrome and in Firefox, you will get different results for the color (even IE11 gets it right this time); http://jsfiddle.net/3UN3E/1/
I've not come across this problem before and can't seem to find a solution searching around. The problem is when I place a background using the following example the image will just not appear.
As you can see on chrome and the search bar should look like that, but on firefox its just a white box.
chrome example
background: url(../images/facebook.png) 95 20 no-repeat;
It works absolutely fine in I.E and chrome just not firefox, is this something to do with the position integers or something else.
Thanks
Danny
CSS doesn't have default units, so Firefox doesn't understand that you mean pixels. The other browsers just take a guess and help you out. Change it to:
background: url(../images/facebook.png) 95px 20px no-repeat;
and it should be fine.
Man, I just can't figure this out. This is the damndest thing. In IE9, the background gradient seems to disappear, seemingly at random, depending on the width of my element.
Just to start off, here's a test link that you can view.
http://babackofficedev.radolo.com/TestButtons.aspx
What's also weird is that it doesn't happen in JS fidde:
http://jsfiddle.net/jmillspaysbills/n833q/
I think I've narrowed down the culprit, but I just can't figure out WHY this is happening. The issue seems to be the background-size: property. On my buttons with a gradient, I give it: background-size: 1px 175%, then on hover: background-size: 1px 100% - this basically allows a smooth transition on chrome, firefox, etc. instead of an instant transition to a different gradient. Anyway, that all works fine.
I don't plan on changing this, because this is only effecting IE9, but I would love to know why it's happening so that I can try to figure out a workaround.
After some investigating, I've found that this only happens on certain widths. It just so happens that a word I was using: "role" was the perfect width for this to happen, which is how I figured this out.
Doing some testing, I've found that it happens at the following widths: 43px, 49px, 57px, 63px, 84px, 85px, 96px, 99px, 109px - That was as far as I got. I'm sure this happens above 109px, but I haven't tested above 110px.
I just don't get it. I can't seem to figure this out. Has anyone ever had this issue? Can anyone give me some input? It's driving me crazy.
Replace 1px in background-size with 100%. I don't know why that works, but it does.
Im working with a cross-browser compatibility, fixed everything fixable for IE7 and IE8. But it seems there is a slight (huge) problem with the background which is called by CMS.
As far as it seems, there is no problem in IE7 v8.0 BUT in IE7 v7.0 looks moved to the side in most pages, but not in others.
I figured it was because of a fix i did for some lost positions, but when i searched for a lost object in the right there was none.
And i have no idea how to make this bg to look right.
Please help me! im going crazy with this!
Page:
http://www.tvazteca.com/homes/laislaelreality
I think the problem its the background position. I cant make it work for the IE7.
<body class="fondo-pagina" data-twttr-rendered="true">
<style type="text/css">
.fondo-pagina {background:url(http://static.tvazteca.com/imagenes/2012/29/1634805.jpg) no-repeat; background-position: 50% 40px;background-color:#0b4a51;
*background-position: 50% 0 !important;
}
.bgBottom{background:url() bottom center no-repeat;}
</style>
The style up there is added automatically by the CMS. Although i have the same class in the style sheet:
.fondo-pagina{
background: url(../img/fondoislaEtapa1.jpg) top center no-repeat;background-color: #0b4a51;
*overflow-x:hidden;background-position: 50% 0px!important;
*background-position: 50% 0px!important; }
I havent been able to make it work. I know im using hacks, and its not the best option, but i was asked to only use one style sheet for the site, so another one for IE7-IE8 was out of the question.
How can i make IE7 to read the background position? Is it going crazy because of the double clases?
Using Chrome and FF, element inspectors i found out none of the background position clases were taken for IE.
TY for reading :)
I found the problem.
Nothing was wrong with the Html php and my Css
The problem comes from FACEBOOK:
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
The scrip has to be placed in the div that contains the likes/comments etc. Other way it will go crazy in IE.
It opens up a big div that forces the page to be contained and makes horizontal scrollbar to be extended. As result, the background will take such width as the base one and position itself on the 50% 0px of that thing.
It only affects IE versions. The other browsers work fine.
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.