One of my css styles has a black background color and a filter with an opacity. This is supposed to be translucent and almost always is.
There is one exception to this.
IE8 doesn't play nice with a lot of Microsoft's other products, and update panels in .NET seem to be one of them. If I have an updatepanel that sends a javascript alert on callback, IE8 won't bother rendering the filter of the style. The screen will just be black until the user moves the alert box or clicks O.K.
I tried to force a redraw by changing dom elements and all that, and it seems that IE8 is just lazy and doesn't care about the filter when the alert box is up.
I need to maintain the opacity without using a filter or opacity tag, as these don't render in the correct order with update panels and alert boxes in IE8.
Is there a viable alternative?
One alternative is to have a semi-transparent PNG and set it as the background. This removes the need to set a transparent filter on the element as the transparency of the PNG is applied. This works in IE8, Firefox, Safari and Chrome (but probably not in older versions of IE).
Related
I'm using keyframes to add animation to parts of my website. The animation is a fade in with the page content. My question is if the user loads the site in an unsupported browser, will the text load on the page, or will it not be appear (because of no animation support)?
You can test yourself this quite easily. Remove the animation keyframe (or anything else to make the animation happen) and refresh the page. If the text shows then yes, it will show on browsers that don't support animations
As for the actual animation itself, without seeing it it is hard to tell. If the text's default is to be transparent, have an opacity of 0, or have display:none to start out with then it will likely not show up on browsers that do not support CSS3 animations.
On a side note, CSS3 animations have pretty good support given you use browser prefixes for the older browsers
CSS animations are defined with "to" and "from" or a bunch of keyframes "xx%". But before the animation launches (or if it doesn't launch) and after it has finished, all properties are defined by the rest of the stylesheet, and whatever is in the keyframes has no effect.
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'm creating a draggable/resizable menu with all the neccesary links to control the website, a CMS-bar kind of. I'm using some png's to create the background, set with some transparency.
It works great in FF, but in IE my png's get transformed after I drag my menu around:
Screenshots:
http://img.photobucket.com/albums/v739/Alienna/falcon/drag.png
Also, that big empty space? That's a log-out button(div with background-image and a-element), of wich only the :hover status seems to work, and only before dragging ...
Any fixes for this? I thought IE's png problems were gone after IE6(tested this ie IE7/8) ...
I'm not 100% sure, but I assume this is the old "PNGs with alpha transparency in DIVs with alpha transparency" bug that is present in all IEs including 8. See here for more info.
In short, IE has difficulties with alpha transparencies in PNGs when those are in containers that themselves have an opacity different from 1. When you drag the element, its opacity changes, and the bug comes into play.
Convert your draggable image to 8 bit, It works for me..
is there any reason why Internet Explorer (IE7 in my case) gets sluggish and eats up lots of CPU time when using the CSS :hover command or using onmouseover/onmouseout?
I'm really not doing anything complex, nor is my page particularly large.
When I move my mouse anywhere else on the page (where nothing is changing) iexplore.exe stays at 0%, but once I start moving across any element that has onmouseover/onmouseout or a CSS hover class attached to it, things get really slow and sluggish and CPU usage gets high.
The page works perfectly fine in Firefox, Chrome and Safari with not speed issues/sluggishness whatsoever.
Hints/Ideas?
Edit: The onmouseover/onmouseout is on <tr> tags (highlighting a row in a grid); the CSS:hover is used on <a> tags swapping a background-image url.
You need a non-flicker CSS rollover (which doesn't trigger continual 'hover' signals with every tiny mouse movement). Swapping images on hover generally doesn't work too well, especially in IE.
The best way to do this without a Javascript library is to have the desired 'hover' image as a background to the element beneath the one you're hovering over, and the non-hover image as a background to the element in front.
Then for the CSS :hover state of the element in front, set background-image: none; background-color: transparent; so that the desired 'hover' image in the underlying element is revealed.
Check the source code for this example non-flicker CSS rollover.
Depending on your markup, you may need to adjust the z-index value to get the top element 'in front' of the underlying one.
not doing anything complex
Well, what are you doing? I've seen this just from changing the background tr color. IE doesn't seem to be good at this.
Is there a way to hide the border of a drop down menu in IE (to make it look flat, blend into the background)? In Firefox it's simple enough to just set the border to 0px, but IE still renders a border even if you set the border to 0px.
This isn't possible in IE. They don't allow styling of the drop-down component of a list, except for the text inside it (ie. red text).
IE actually uses a Windows-level control, not a browser-based one, so it is rather limited.
Edit: When this post was originally made, a stable version of IE8 wasn't released yet. According to comments, IE8 supports border styling. However, even ~2 years after IE8's release, you still shouldn't count on all of your users having IE8+.
I recently saw some tool kits fly the actual dropdown out 5000 pixels, replace it with a custom control, and use javascript to connect the 2 controls.
IE8 supports changing a drop down`s border, but IE6 doesn't.