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/
Related
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.
Here's the code on CodePen. It looks exactly as I expect in Chrome. Firefox and Safari both look wrong. (I'm on the latest versions of all 3.)
I'm working on a way to use a constant gradient background across multiple inline-block elements. Here's how it's working right now:
I have a parent ol whose :before pseudo-element has a gradient background (transparent to opaque color) and a z-index set to display it above the child lis.
The lis have the background-color set to the color that looks like what the gradient's transparent value is set to.
The li's color is set to transparent and have :before pseudo-elements that display the text that's previously set to transparent and have their z-indices set to display above the ol:before (with background gradient).
The problems I'm seeing in Firefox:
The gradient looks like it's got 3 color stops (transparent, grey, transparent) instead of the 2 that are set.
The gradient seems as though it's got a multiply blend mode set.
The problems I'm seeing in Safari:
In addition to the same problems in Firefox, it also displays two gradients which seem to have multiply blend modes. One from -webkit-linear-gradient and one from linear-gradient. Solving the issue of the apparent blend mode should take care of this third issue, though.
My googling made me aware of background-blend-mode, but setting that to normal (or any other valid value) changed nothing. I think it only works with multiple backgrounds on a single element, but I'm not sure about that. However, that would explain why it doesn't solve my problems.
The problem was that I used the keyword transparent rather than a transparent version of the color that it was gradating to. The browsers that didn't render the gradient as expected were treating transparent as transparent black. That meant that different gradations between black and my color were present in the gradient.
I'm using SASS so the fix is pretty simple: Just use the rgba() function to convert my hex color to rgba.
background-image: linear-gradient(to top right, rgba($brand-primary, 0), $brand-primary);
I updated the code on CodePen to show the solution.
you need to add this prefix for some browsers which don't take the styles
for mozilla use
-moz-linear-gradient /* FF3.6+ */
for chrome/safari
-webkit-gradient /* Chrome,Safari4+ */
-webkit-linear-gradient /* Chrome10+,Safari5.1+ */
for opera
-o-linear-gradient /* Opera 11.10+ */
for ie 10 +
-ms-linear-gradient /* IE10+ */
i have edited you codepen by adding prefix check it JS Fiddle
I have the two images below.
They are the same image, with one having a slight glow effect on the text.
They are setup as below:
<div id="header"><a></a></div>
withe the original image being the background for the div, and the 'glow' image being the background for the anchor tag, with display:block; width: 100%; height: 100%;opacity: 0;
i am the using the below jquery code
$('#header a').hover(
function() {$(this).animate({"opacity":"1"}, 1000);},
function() {$(this).animate({"opacity":"0"}, 1000);});
to fade the anchor image in and out on hover.
this works fine in firefox, chrome ect.
But in internet explorer the image is given a solid black background where there is transparency.
How can i fix this?
NB: I am only worried about ie7/8 not 6.
http://webspirited.com/header-reachsniper.png
http://webspirited.com/header-reachsniper-hover.png
Update
I have decided that this is simply not worth my time to do in internet explorer.
However this works perfectly in ie9, so i guess ill remove this effect for browsers less that ie9.
In order to set the opacity of a transparent PNG image, you need to use the AlphaImageLoader filter, even in IE8.
EDIT: You also need to add the alpha filter in the CSS, like this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path", sizingMethod="scale"),alpha(opacity=100);
Otherwise, jQUery will clear the existing filter as it adds the alpha filter.
This post from Dave Shea's mezzoblue.com may help you: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/
It notes all of the methods which he tried, and the final solution he arrived at the end:
What did work was a little library
called DD_belatedPNG that applies PNG
transparency via VML instead of
AlphaImageLoader. It’s designed for
IE6, but it works just fine in IE7 as
well. For IE8, I was forced to throw
out an X-UA-Compatible meta tag and
step IE8 down to IE7 mode for this
particular page.
With a tiny caveat at the end
It’s still not perfect. I noticed a
faint white bounding box poking
through at lower opacities that forced
me to slightly adjust hover effects
for all versions of IE. But you know,
for all that, it’s darn well good
enough.
I have a text field, and it's good everywhere except Opera, where it takes the color of the background.
How can I make just the inside white? Setting background(-color) to white makes the entire square element background white, which is not what I want.
The cornering is border-radius. No IE hacks needed :)
No specific CSS is used for the other browsers, it just works, in that it was always white.
Should've posted the link earlier, but the page in question is http://blog.darkhax.com/
I can't see anything wrong - I've set up a simple test here: http://jsfiddle.net/ZxR5k/1/, which works fine on Opera 10.6. The border radius property works as expected.
It appears from the image you have up there that you are applying the background color to the parent of the input element. That may be the problem.
How are you creating that curve? Is it with border-radius? If so, background-color should do it (though you say it doesn't).
If it is an image, can you fire up the image in your graphics program and give it a white background?
What CSS do you use that works in every other browser except Opera?
I have a very strange problem that I cannot seem to overcome. When I overlay text on top of a to that have a PNG image and also has an Opacity, the text itself becomes transparent. I've tested this in IE7, Firefox, Chrome, Safari, and seems like IE 7 just will not want to work.
To see the problem, visit http://yask.me'>http://yask.me
Doesn't work in IE8 either, and I am certain it is because you are fading the images and the fact that IE uses the alpha filter to do opacity changes on the fade.
If you do the following css, it seems to solve it (setting the alpha filter on the text appears to keep the text as one would expect):
#panMain {filter: alpha(opacity=100);}