I have a slideshow running with textquotes. These quotes contain a custom font provided by cufon. This all works fine.
However when the slideshow fades in or out, the text gets a dark border or shadow. I think its a transparancy issue in IE but I can't find a solution.
I'm using the jQuery plugin Cycle for my slideshow, and it has some IE opacity and cleartype fixes but none work.
Any ideas ?
Thanks!
This is an old question, but because people might still end up here when searching for similar issues, I'd like to add the "solution".
De solution is quite simple really. Use #font-face. Just like Mottie suggested. I ended up switching to a different but very similar font that did not have the beforementioned issues with #font-face.
As far as I can tell it's not possible to fix it by use of cufon in any way that does not involved seeing flickering texts or any other rendering issue.
Related
When the browser is IE9 and it has a horizontal scrollbar, sometimes icons go missing from my CKEditor. This happens especially during Undo and when switching between source mode and back. The horrible part is that I can't replicate it outside my site (sorry no linking), but I can replicate it easily within it by simply adding a table and then pressing undo. The icons come back when I move my mouse over them (Maby I should do a video to demonstrate?).
I have no idea what is causing this so any suggestions are welcome. I don't touch the icons in my custom code at all. Have you seen a similar issue to this? What could be causing it? Is there anything I can try?
Added: YouTube demonstration of the issue happening
Missing icons:
Very weird. Seems that disabled buttons lose their icons. I see that you modified CSS a little bit - haven't you overwritten path to icons strip for disabled buttons as well? Or have you updated CKEditor installation recently, but without stylesheet you modified earlier? Maybe this is a cache issue - path is the same, but IE9 remembers old file where those icons were in different positions.
Turns out that it indeed was some insanity inducing IE9 rendering bug with CSS opacity.
For others experiencing this bug: I fixed it by manually editing the CKEditor editor_ie.css. There is a part like this: .cke_button_disabled .cke_button_icon{opacity:.3}. All I did was comment out the opacity, leaving .cke_button_icon{/* opacity:.3 Removed By Nenotlep */}.
Note that a "fix" like this is a Bad Idea, you have to remember to manually maintain the change in your code repository.
I want to use transition effect on hover for IE 8 like in this example:
http://jsfiddle.net/evcL2/10/
According to this site (is working only on ie) that is possible (use trasntion option and fade effect) but I am not able to use it. Can someone help me a little bit with that script, for me is simportant to have that transition on hover only for background color.
Thank you.
IE8 doesn't support CSS3 transitions. You'll have to fake it using JavaScript tweens, or settle for IE9 support. IE8 users don't deserve nice looking websites anyway :-)
But if you're in the awkward position of being tasked with creating IE compatible stuff, take a look at this MSDN introduction to Filters and Transitions. It appears that even the IE specific transition filters require JavaScript to work, so you might as well go with the proper JavaScript solution of using jQuery.animate. With a small plugin it can animate colors. Here's an example on JSFiddle.
For some reason the website you suggested doesn't render properly in my browser. However, I think you may be attacking the problem wrongly. I would use jQuery's $.animate() function for this, as it is very cross browser and can animate gradual changes in many css properties.
I'm working on an example of a jQuery notification bar that you can see here: jQuery notification bar example
But for whatever reason the CSS I'm using to define transparency in IE 7 and 8 is not working. If you look at the example in IE 7/8, you will see that the transparency for the .png close button and the transparency for the "reopen" element does not work.
I've successfully defined an element's transparency in IE using this code before, but I can't figure out why it's not working in this example.
I thought I might have hit on something when I read this post, but after trying out the solutions mentioned with the hasLayout property I still didn't have any luck.
Any help would be greatly appreciated. Let me know if you need any additional details.
Thanks!
Wow somebody else just asked a question about this. In older versions of IE, you can't compose transparency from a PNG alpha channel with transparency from a CSS effect. As soon as you apply the style, it quits trying to do transparency from the image.
Yes, it's profoundly lame.
opacity: 0.50;
filter:alpha(opacity=50);
This fixes opacity for IE. Using 50% transparency as example value here.
As for the hellobar_close, give it a background-color and it should work. IE has poor support for transparency in .png images.
OK I believe that with the help of the answers provided above and some additional research on my own I have answered my question.
There are actually 2 parts to this problem:
1.) Transparency issues with the .png close button in IE - This part was answered by Pointy above. According to Pointy "The browser is incapable of managing the compositing of the transparent PNG concurrently with any opacity effect on the image. In other words, for any given pixel, you either get alpha channel effects from the PNG itself, or from an opacity filter, but not both." (Quote taken from his answer at IE7 and "jaggies" around layered PNGs (with jQuery))
What I want to happen is for the .png close button to be semi-transparent in it's normal state, and full opacity in its hover state, but apparently this is not possible to achieve in IE using only one single image and CSS transparency. So to get around this I'm just going to have to make a dual-state .png image to get a nice hover effect, rather than relying on CSS transparency to handle that component.
2.) Transparency issue with the "reopen" button - This button should be semi-transparent but did not work in IE. After doing some extensive research on my own I came across this post: jquery IE Fadein and Fadeout Opacity. woodstylee's answer in that post solved my problem.
Due to some weird IE bug that I don't completely understand, I need to declare the element's opacity using jQuery/javascript before any transition/fade effects are applied.
Obviously there is some kind of conflict with jQuery fades/transitions and CSS opacity in IE. If anyone else has some additional info on this subject please post!
When I updated my code with the following, I was able to successfully get my "reopen" button to appear semi-transparent in IE.
$('#hello_mini').css('filter', 'alpha(opacity=75)');
Note that the above line of code needs to be placed before this line:
$('#hello_mini').show('slow');
Also of note... this IE bug appears to only apply to the jQuery show() and hide() functions. When I switch the animation to slideUp() or slideDown() the transparency works fine without any additional javascript.
So bottom line... there is something weird going in with CSS transparency in IE when applied to elements animated through jQuery show() and hide()
If I find out anything else in my research I will post it here.
Here is a link to my updated example, which works in IE 7/8 now.
When trying to use Shadowbox with IE6 the overlay transparency simply not works, it remains completely black. In all other IE versions (7, 8 and 9) the overlay works just fine. Do you guys have any idea to why this is happening?
If you wanna check out what I'm talking about, you can test the examples on the project's web site, they also do not work in IE 6. You might notice that the buttons are also not displayed, as they are .png images with transparent background, however this can be easily fixed by creating .gif images and setting them specifically for IE6.
Links:
Main page: http://www.shadowbox-js.com/index.html
Thanks,
I seriously advice you to give up, because people that still use IE6 are seeing a weird, ugly, cracked web all the time and they just dont care. You may spend days struggling with weird ways of overcoming a problem that comes from the simple fact that ie6 was not made for transparency at all.
GIFs wont work for you. Wanna know why? Because opacity of gifs is either 100% or 0%. In Shadowbox you will want middle opacity, like 50% or 70%. PNGs might work with pngalpha js scripts, but they tend to fail in animations, which are used for shadowbox.
Please understand that i'm not flaming here, i'm just trying to be honest with you.
For the life of me, I can not figure out why some styles are not being applied to an unordered list.
If you view this site: http://www.alclawyers.com.au/ in Firefox, you will notice there are circles down the bottom of the text that can be clicked to shift to different panels of content.
Now, when you visit the same site in IE7, none of the styles from the stylesheet are being applied (well at least not for me).
I know a fair bit about selector support, but I can not figure out this one!
If anyone digs in and follows the code, here is what is happening
jQuery counts panels and makes an unordered list beneath the text.
CSS styles this list (see Firefox for intended layout).
It's probably something really simple, but it's giving me a lot of grief.
Thanks
firefox likes to close unclosed tags for you. IE gets a bad wrap lots of times.
Well I figured it out already, I have a div being inserted in JS without the closing angle bracket. Was working in FF, but IE tripped up on it.
Thanks to anyone that took the time to investigate!