I have an image that is not loading in IE8. When browsing to the image it comes up. It loads in Firefox and Chrome.
I have tried running IE8 in safe mode and compatibility mode.
On some boxes with the same OS and browser it displays. Any other suggestions?
Thanks
Cant see your code but I've had this problem before.
Im guessing you've got
<img src="pathtoimage/photo.jpg">
Try
<img src="/pathtoimage/photo.jpg" />
or try substituting in an absolute url and see if it makes a difference
<img src="http://mysite/pathtoimage/myphoto.jpg">
What do you see? A red-X? I have seen this happen with some .jpg's with funky color settings. I apologize for not knowing the exact specifics, but I sent it back to our graphics folks who know immediately what to do. "Oh, sorry - wrong blahblah. Try this one." and it works. CMYK vs. RGB maybe?
I think the problem is with the AlphaImageLoader IE hack to get transparency. Our image is a gif with the css AlphaImageLoader style applied.
Related
I have a bespoke font for a client which I converted into a webfont. All went fine, works on my mac and others across Firefox, Safari and Chrome, however when viewed using Windows, the font becomes extremely distorted and unreadable, on any browser.
Does anyone know what could be causing this? Could it be an issue within the original font or is there a code trick I can use to fix this?
It's a hinting problem. Microsoft’s rasteriser tries to align characters to whole pixel grid.
Read: https://www.typotheque.com/articles/hinting
I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.
Here is the link:
http://alonbt.com/css3/netscape/
The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.
Any suggestions bout what might be the problem?
I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072
The issue shows up in Safari too.
You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').
Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).
I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).
I have create a PNG arrow graphic for use in a client's website. It render's perfectly everywhere except in IE 6,7,8 and 9. I have attached an image for you to examine and have already tried 2 different IE png fix scripts - one jquery and one a css behaviour .htc file.
Please assist me.
Thanks
Jamie
Image: http://i51.tinypic.com/2w1uzqe.jpg
Sorry to say that but for 5 years i've been looking for 100% working hack for png transparency bug in IE's with no result. There are many of them and usually each of them doesn't work here and there.
Try using transparent gif instead or crop arrow image with background along. It will take few more bytes of White color so won't damage your performance that much.
The bug that IE PNG Fix scripts are designed to fix is only a problem for IE6 and lower.. hmm.. possibly IE7? I forget. In any case, IE8 fixed the issue, and IE9 definitely shouldn't have it. These IE versions may still have plenty of bugs, but the old well known PNG background issue isn't one of them.
My guess is that there may be a corruption in the PNG file itself.
My suggestion is to try loading the PNG image into Photoshop (or your favourite graphics app), and re-save it. That may be all you need to do to solve the issue.
Failing that, would you be able to give us a link to the actual PNG file, so we can have a look as well?
I have noticed this weird behavior in firefox, it seems like font have some colorful noise. The example is shown in the image.
Does anyone know how this can be solved? With some CSS media type (which now is screen)?
I'm using firefox 4.0.1.
Any help is appreciated.
You're seeing subpixel font positioning and rendering. I assume that you're on Windows, which is why you only see it with Firefox 4 (and IE9, if you try that). On Mac, Firefox has done this for a very long time.
Created a website, looks pretty solid on the desktop. (http://foo.com) Used an .htaccess redirect to send those using mobile browsers to subpage (http://foo.com/m.html). Redirect is working like a charm.
My problem is that one image (and for that matter, the background color) doesn't display on the mobile page, on any mobile browser. I've tried reformatting it (.png, .jpg, .gif), resizing it (down to 55p x 44p). It is the only image on the page. I've tried using a css stylesheet specifically for the mobile subpage, I've tried not using a stylesheet at all and simply putting the image in the body. Nothing works. I've searched for an answer but all I can find is 'why doesn't my wallpaper display on my mobile phone', which doesn't help at all.
Anyway, if someone knows what I'm doing wrong, I'd really appreciate it. Thanks all!
I've got the same problem, I've done a very simple page, with a single image inside, surfing there with desktop was all right, while going there with a mobile makes the image invisible, it takes the place, but without display, like with "visibility:hidden";
after some tries, i've noticed that the image was saved in a CMYK color space, I've converted the image in RGB color space and then all goes right.
mobile browsers seeams to not manage the CMYK image versions...
Look at CSS part:
background-image:('background.gif')
Do You think all is OK here? Because I think it's not...
https://developer.mozilla.org/en/CSS/background-image