IE8 transparent background of hint bug(tooltip show under content)
modification only: white-space: pre-wrap; (because of multilines)
https://cloud.githubusercontent.com/assets/9686181/5003427/d5514c36-6a15-11e4-959d-7cff3c753c39.png
Bug is also in developer examples http://kushagragour.in/lab/hint/ (with IE8)
You can't have a background color transparent in ie8.
What you can do is set a background image and make that transparent.
transparent background issue IE8, IE7
Try Internet Explorer - Alpha Filter !!
Here is the syntax:
filter: progid:DXImageTransform.Microsoft.Alpha(parameters);
For IE-8
filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=<Opacity Value>)";
Reference:Alpha Filter
Related
A Firefox change broke some of my background/border images. See this issue for more details: CSS - New Firefox-release doesn't show Border-Image anymore. When I fixed this issue by adding border-style: solid my text now displays a white/gray background behind it. Any idea why this might be happening. See my image on Chrome (how it is supposed to look) and then on Firefox.
Chrome:
Firefox:
Here is the jsfiddle link: http://jsfiddle.net/nirodhasoftware/offuhxao/1/
You need to draw a background too.
From pseudo or from element itself :2 examples to tune to your needs.
pseudo:
background:#5099D6;
background-clip:padding-box;
element:
background:url(http://www.rwe-uk.com/static/ichat_with_css3/speech_bubble_left_2.png) center / 300% 150%;
background-clip:content-box;
I am using Fancybox v2.1.4 throughout a site with no problem, except in ie8 (even ie7 is ok). When I apply fancybox to a div in ie8, all background css is lost.
Here is what it is supposed to look like, and looks great in all browsers but ie8:
http://hallyb.com/images/good.jpg
And here is how it renders in ie8:
http://hallyb.com/images/bad.jpg
Nothing I change with the fancybox.css affects this black background; in fact, the background color is set to #fff first, with a background image added second Nothing about it says "black".
Thanks for any insight to this problem.
SOLVED!
This one was tricky because I am using PIE (http://css3pie.com) to wonderfully render css3 effects in older IE. For some reason, IE8 does not like it when the PIE.htc behavior file is called on nested elements, such as the fancybox 'wrap' code I am using here. IE7 doesn't seem to care. Remove the duplicate behavior attribute from the fancybox css and all is well.
This is best explained with images.
Firefox, right:
Chrome, wrong:
jsfiddle.
That is a (fully green) image with 2px (red) border and a border-radius of 6px. In my design, the border is barely visible, so the image looks completely square in Chrome.
Is it possible to achieve the correct result in Chrome without extra markup nor javascript?
I don't believe you can do this with Chrome. Images will extend over the bounds of border-radius, and I think that's the intended behavior (or else they just didn't notice).
When using a div, for example, you can see that the background behaves as it should. You could consider using a div instead of img, and using your source image as the background (and forcing its width and height).
Plainly said: In Chrome, there does not seem to be a way to force your image to be hidden by the border of itself (or even of its container) unless it is set as a background. In fact, the issue has been asked about before, and blogged about as well (and, in fact, patrickzdb's comment there may help you).
Apparently it is a bug in chrome..
I normally apply box-shadow for chrome instead of border.
so, if you don't mind to apply css hack to workaround it without javascript: http://jsfiddle.net/3cuHU/
If I use Nivo Slider on a page with a fullscreen background image, the slide transitions work slow and chopped in IE 7 and 8. In all other browsers, the transitions work smooth.
Here is a very basic example:
http://www.test-case.de/fullscreen-nivo/demo/demo.html
To ensure that the problem is not caused by any JS conflicts, I didn't use any JS for the fullscreen background. It's only a few lines of CSS.
Anybody an idea how to fix that?
Thanks a lot!
Karl
I've managed to partially fix it:
img.full-screen-image { -ms-interpolation-mode: nearest-neighbor; }
Not an ideal solution though.
I have div and span elements with PNG-24 background images. The background image is pixel sharp, however, they appear blurry in IE8 despite the browser's zoom being set at 100% and text at medium size.
Strangely, when I scroll down and back up, the background images appear sharp again.
This is how it appears:
After scrolling down and back up, this is how it appears:
Even in this case, its a bit blurry. This does not occur in IE6, IE7 or IE9.
I had the same problem - PNG-24 images look fine in Firefox but very blurry in IE8. The solution, in IE8 go to Tools > Internet Options > Advanced Tab. In the tree, under the Multimedia deselect Enable Automatic Image Resizing. This should fix the problem.
.classid img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}