We Keep Coding

IE still catches mouse-actions behind fullscreen div

I have a strange issue with IE (tested on IE8 as this is the lower end browser on the project)
I make a fill height & full width div appear on the screen on some condition to block all user action (it's just a help, I know it can easily been broken user-side..)
The only action that can be done is clicking on this curtain at a certain x/y range to disable it.
But, obviously, in Internet explorer it doesn't work.. elements behind the div are still catching click and hover actions... Why?
My first idea was that there was something wrong with the css making this div a 0x0px div on IE, but when I add a background-color to the div, it fills the screen as expected, so that's not the solution.
this is the curtain's css :
#screencurtain {position:absolute; top:0px; left:0px; display:block; width: 100%; height: 100%; z-index:9000;}

This is a known issue in IE with positioned elements.
The most common solution is to set the element's background property.
If you need the background to remain transparent, you can simply use a transparent image as a background tile. Alternatively, you can set the element's background to an image that does not exist.
For example:
#screencurtain {background:url('transparent.gif') repeat;} /* 10x10 gif image */
/* OR */
#screencurtain {background:url('some-made-up-image.gif');} /* bogous path */

Full banner width over the screen

I have a banner that uses an image as the background. The image's size is 670*303. Is there a way to stretch the banner(image) to full width of the screen.
Demo is at http://jsfiddle.net/zhshqzyc/xGQtF/2/
And also, there is extra color(background-color: #808000)
below the banner, how to remove it?
Thanks.

background-size: 100% should do the trick.
Here, http://jsfiddle.net/xGQtF/6/

If its a gradient or pattern that can be repeated you can use
background-repeat:repeat-x;
or just insert 'repeat-x' into your background css like
background:url(images/blah.jpeg) repeat-x;
That way you only need a small chunk of the image>smaller image sizes>quicker loading time.
to get rid of the color it is showing with the image you can use
background-color:transparent;
Also if, as I suspect, you wish to make the banner stretch seamlessly from one side to the other, be sure to set the body style with
padding:0px;
width:100%;
and use
margin:0px;
width:100%;
on the div containing the background.
Although it may stretch to the full width without setting the body padding to 0px, some browsers automatically give the body padding if it isn't set so it will counteract those that do.
If you're using an image that has curved edges and vertices etc this won't be right for you, you just want to stretch it (which personally I think wont look nice on 99% of detailed images) you can use:
background-size:100%;
Hope I've helped =)

Fading a border (css)

Here is a picture of what I am working with:
I need the borders below the vertical menu bar (on the left) to fade out (the one going up and the one going down). How would I make these two borders fade out? It seems kind of blocky now. I prefer not to use JavaScript but I will probably do what is necessary (I'm trying to make the site as light weight as possible).
EDIT
By fade, I do mean over space, not time.

You can use two fade-out images as background-image
li.edge_top, li.edge_bottom {
background-position: right;
background-repeat: no-repeat;
}
li.edge_top {
background-image: url:('fadeout_top.png');
}
li.edge_bottom {
background-image: url:('fadeout_bottom.png');
}

You can make a bunch of 1px tall blocks with successively lighter border-right colors.
(Assume you mean "fade" as in over space, not time)

You could try the new CSS3 border-right-image attribute (http://www.css3.info/preview/border-image/) with a tall gradient PNG. However, this isn't going to be widely supported in most browsers. You're probably better off creating an image with the right gradient and setting it as the background-image on the .edge_bottom and .edge_top css classes (be sure to remove the existing border from those classes, too)

CSS3 gradients to the rescue!
Live Demo
Note: Gradients are only set up for Firefox. I can't test Webkit, but it should be pretty much the same.

This will remove it, these pseudo elements are not supported in older browsers
ul.vertical_menu > li:first-child {
border-right:none;
}
ul.vertical_menu > li:last-child {
border-right:none;
}
http://jsfiddle.net/5Ceb5/

PNG transparency issue in IE8

I'm having problems with a transparent PNG image showing black dithered pixel artifacts around the edge of the non transparent part of the image. It only does this in Internet Explorer and it only does it from a Javascript file it is used in.
Here's what I'm talking about...
http://70.86.157.71/test/test3.htm (link now dead)
...notice the girl in the bottom right corner. She has artifacts around her in IE8 (I haven't tested it in previous versions of IE, but I'm assuming it probably does the same). It works perfectly in Firefox and Chrome. The image is loaded from a Javascript file to produce the mouseover effect.
If you load the image all by itself, it works fine.
Here's the image...
http://70.86.157.71/test/consultant2.png
How to fix this?
The image was produced in Photoshop CS3.
I've read things about removing the Gama, but that apparently was in previous versions of Photoshop and when I load it in TweakPNG, it doesn't have Gama.

FIXED!
I've been wrestling with the same issue, and just had a breakthrough! We've established that if you give the image a background color or image, the png displays properly on top of it. The black border is gone, but now you've got an opaque background, and that pretty much defeats the purpose.
Then I remembered a rgba to ie filter converter I came across. (Thanks be to Michael Bester). So I wondered what would happen if I gave my problem pngs an ie filtered background emulating rgba(255,255,255,0), fully expecting it not to work, but lets try it anyway...
.item 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;
}
Presto! Goodbye black, and hello working alpha channels in ie7 and 8. Fade your pngs in and out, or animate them across the screen - it's all good.

I put this into a jQuery plugin to make it more modular (you supply the transparent gif):
$.fn.pngFix = function() {
if (!$.browser.msie || $.browser.version >= 9) { return $(this); }
return $(this).each(function() {
var img = $(this),
src = img.attr('src');
img.attr('src', '/images/general/transparent.gif')
.css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
});
};
Usage:
$('.my-selector').pngFix();
Note: It works also if your images are background images. Just apply the function on the div.

I know this thread has been dead some time, but here is another answer to the old ie8 png background issue.
You can do it in CSS by using IE's proprietary filtering system like this as well:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
DEMO
you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.
You may also need to play with the sizingMethod in the filter to get it to work the way you want.

I had the same thing happen to a PNG with transparency that was set as the background-image of an <A> element with opacity applied.
The fix was to set the background-color of the <A> element.
So, the following:
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
Turns into:
/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

PNG transparency prоblеm in IE8
Dan's solution worked for me. I was trying to fade a div with a background image. Caveats: you cannot fade the div directly, instead fade a wrapper image. Also, add the following filters to apply a background image:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE6 & 7 */
Please note that the paths in the src attributes of the filters are absolute, and not relative to the css sheet.
I also added:
background: transparent\9;
This causes IE to ignore my earlier declaration of the actual background image for the other browsers.
Thanks Dan!!!

please try below code.
background: transparent\0/;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png'); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */

Dan Tello fix worked well for me.
One additional issue I found with IE8 was that if the PNG was held in a DIV with smaller CSS width or height dimensions than the PNG then the black edge prob was re-triggered.
Correcting the width and height CSS or removing them altogether fixed.

I use a CSS fix rather than JS to workaround my round cornered layer with transparent PNG inside
Try
.ie .whateverDivWrappingTheImage img {
background: #ffaabb; /* this should be the background color matching your design actually */
filter: chroma(#ffaabb); /* and this should match whatever value you put in background-color */
}
This may require more work on ie9 or later.

Just want to add (since I googled for this problem, and this question popped first) IE6 and other versions render PNG transparency very ugly. If you have PNG image that is alpha transparent (32bit) and want to show it over some complex background, you can never do this simply in IE. But you can display it correctly over a single colour background as long as you set that PNG images (or divs) CSS attribute background-color to be the same as the parents background-color.
So this will render black where image should be alpha transparent, and transparent where alpha byte is 0:
<div style="background-color: white;">
<div style="background-image: url(image.png);"/>
</div>
And this will render correctly (note the background-color attribute in the inner div):
<div style="background-color: white;">
<div style="background-color: white; background-image: url(image.png);"/>
</div>
Complex alternative to this which enables alpha image over a complex background is to use AlphaImageLoader to load up and render image of the certain opacity. This works until you want to change that opacity... Problem in detail and its solution (javascript) can be found HERE.

My scenario:
I had a background image that had a
24bit alpha png that was set to an
anchor link.
The anchor was being
faded in on hover using Jquery.
eg.
a.button { background-image: url(this.png; }
I found that applying the mark-up provided by Dan Tello didn't work.
However, by placing a span within the anchor element, and setting the background-image to that element I was able to achieve a good result using Dan Tello's markup.
eg.
a.button span { background-image: url(this.png; }

Font anti-aliasing issues with jQuery.fadeIn in IE8?

I'm banging my head against the wall with an issue I'm having in IE8. I am using the fadeIn function on jQuery to make the site content fade in. This works perfectly fine in all of the other browsers, but when the fadeIn finishes in IE8 the font anti-aliasing seems to change, causing the text to shift slightly.
You can see the site at http://www.ipulse.biz. The code I'm using to cause the fade in is quite simple, as shown below.
var showContent = function() {
$('#content div:first').fadeIn(1000);
$('#navigation').fadeIn(500);
} // end showContent
The code is called by a setInterval function, if that makes any difference.

As previously explained, this is caused by Cleartype in Internet Explorer- but there is a workaround that will at least make this issue tolerable.
$('#navigation').fadeIn(500, function(){
if ($.browser.msie){this.style.removeAttribute('filter');}
});
That should force IE to clear the transparency and thus render the text normally.
It still isn't pretty, unfortunately.

This is caused by ClearType disappearing in Internet Explorer, which is quite annoying.
http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/

I know my answer comes a bit too late, but how about thinkin' vice-versa?
IE7 / IE8 don't keep anti-alias for Faded text, so, if you have a single color background (e.g. black), you can create an empty div, background-color: #000; position: absolute; display:block; and put it over the text element.
If your request is to have a text FadeIn effect you just have to apply the FadeOut to the "black" layer over it, and vice-versa.
This way the text anti-alias is kept intact.

Sorry for the very late reply, but I had the same problem and was searching for a solution when I came across this topic. I didn't find a working solution in this topic, but I came up with a simple solution that seems to fix the problem perfectly.
In stead of using:
$('.element').fadeIn(500)
use fadeTo and fade to 99%:
$('.element').fadeTo(500, 0.99)
You won't see a difference in the 1% and because it doesn't reach 100% opacity, IE doesn't seem to apply cleartype.
Let me know if this works for anyone else.

it needs to be called after the fade effect is completed (e.g. 500ms after etc.)

I fixed this by adding in the css for the required text
filter:alpha(opacity=99);
this will only effect ie. I still get a small shift in ie7 but it's exceptable.
You can see it working here http://thriive.com.au/

Found a ready solution for that problem.
http://jquery.malsup.com/fadetest.html

I have a solution: Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})

I also had problems with transparent PNG's in faded area's, but combining the above JS for removing the filter attribute with a tiny bit of css the image black 'border' was gone while fading.
Is my case it was a element that uses a css-sprite, so i only had to add this to my sprite class in the css:
.sprite{
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF'); /* IE6 & 7 */
zoom: 1;
}

I'm not using JQuery but I half-solved this issue by using the following CSS:
div
{
opacity: .15;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
opacity: 1;
-ms-filter:"";
}
The fully opaque text is anti-aliased now, but the translucent isn't. It's not a huge issue for the translucent text though.