Here is the test site:
http://www.bodwell.edu/summer/new_busp_11/
It looks totally fine in any browser, except of course IE.
The menu bar and title png graphics are getting cut off right at where the underlying layer is. I have no idea how to resolve this and still keep this looking as it is in the rest of the browsers, i.e. Firefox, Chrome, Safari, etc.
Help!
If you remove the opacity attribute it will work. (the one below) from the main_panel class
filter: alpha(opacity=90);
In the meantime you can do that (perhaps have an IE specific CSS that will remove that filter).
They look similar enough in my monitor.
You could use that yellow background image with a PNG transparency and not have that tag.
I'm unsure why IE is doing that though.
Related
Ok, see if you can help me out with this one:
1) Go here: http://thepredatorial.com/DHS/index.php in Google Chrome/Firefox/IE9
2) Everything looks great
3) Go to the same web address in IE8
4) There is a gray background (that matches the outer corners) behind the slides of the slideshow that I can't seem to find out why or get rid of...
Any help?
Ok, I ended up fixing it on my own.
Because IE8 had crazy bad PNG transparency issues, I ended up making a png of the entire block above and below the transparent gifs, absolutely positioning it ABOVE everything, then z-indexing everything BUT the banner slides above the absolutely positioned element.
Crude? Maybe. However, now it works beautifully in Firefox, Chrome, IE9, IE8, and FOR GOD KNOWS what reason IE7 as well.
IE8 and below has issues with applying transparent effects to already transparent images. It appears your jQuery "cycle" effect is causing this: remove the flashing transparency, remove the grey background.
Since IE's dev tools are fairly crappy I couldn't easily test any of the workarounds posed here on your actual site, but hopefully one works for you: Problem with JQuery cycle on IE8
I am very disappointed that my 3 hour template design is not cross-browser compatible. Why is this? well, because my header background color is not displaying correctly in IE:
I thought at first that the problem was created by a bad read of padding/margin or other metrics of Internet Explorer (but it was not, I checked and the metrics are perfectly fine)
The only problem is that IE somehow modifies the color of my header's background.
Note: This problem ONLY happens on Internet Explorer (I have tested on Chrome, FF, Opera and Safari)
Here is a screenshot:
I am not sure why, but here is the CSS:
#header{
background:#5BA2D9 url('./images/header_bg.png') repeat-x left bottom;
min-height:90px;
}
My question: does IE modifies the color of my images? Why? How can I avoid this?
I believe this is a result of color correction information in the PNG files.
Optimizing the PNG files should fix it.
See here for more info.
I am pulling my hair out on this one.
We're just about done with the development of an overhaul to our site. As a last step, we're trying to wrap up all the glyphs and icons into a sprite. They're all transparent .png's so the sprite is too. It appears that if a background comes from a sptire, IE distorts it. If it comes from the original file, it does not. FF and Chrome are fine either way.
I am looking at the orignal image and the sprited version side-by-side with grids to see that the pixels are identical. I have counted the pixels in the sprite many times to ensure I'm using the right coordinates. My CSS looks like this:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
The 'XX' lets me toggle back and forth. With the single-file version, it looks perfect: . The sprite-version looks like this: . It looks like it is 'squished' both vertically and horizontally. This does not happen in FF or Chrome.
Any ideas?
EDIT I was able to strip out most of the noise and post an example here. I've added notes to the example to describe my problem.
Thank you so much for taking the time to look at this!
UPDATE We've since replaced these 'overlapped divider images' with CSS pseudo-classes that REALLY do overlap and the zooming issue seems to have gone away. Of course now we have new problems - IE8 gets the z-order wrong and IE7 doesn't understand psuedo-elements at all. But at least the markup is simpler and the zooming issue is gone.
It turns out my problem was caused by IE's 'zoom' feature. Without any zoom, everything looks great like the other browsers. Even 150% or 200% looks good. But 125%, where I had it, causes this distortion. It happens in IE7 and IE8.
Anybody have any idea what might cause this in IE8? The background is meant to be a solid blue, but as you can see it's not. This is not on my machine and I've been unable to reproduce it, but one of my clients is getting it:
More details: The background is using a png (which it doesn't strictly need to as it's a solid colour, but it's a legacy app so you know how that goes)
Also he says he is getting it on 2 machines in IE8. But all works fine on his end with chrome and firefox. I also have tried it in IE8, firefox, safari and chrome and they all work fine.
I've come across this. I was using a semi-transparent 1x1 pixel image to overlay some text on a photo and IE8 "created" a fade in the background like your example.
The solution was simply to make the background 2x2 pixels and it works fine.
Hope this helps.
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.