Fixing hidden png images in IE6 - html

I am using Drew Diller’s DD_belatedPNG solution to fix the common problem of showing png images in IE6 browser and it works fine for visible PNGs.
Currently i have a hidden JQuery Dialog that has some PNGs inside it, when user clicks on a link the dialog appears, and the PNGs inside that dialog appear not fixed in IE6. Is there a way to fix the hidden PNGs too in IE6 ?
Thanks ,

Looks like you can call DD_belatedPNG.fix() again after you load the dialog.

If you're not tied to DD_Belated png, you could try replacing it with http://jquery.andreaseberhard.de/pngFix/ (also jquery), which you can call on specific elements if required.

Are those images by change being left aligned with a float: left or an align="left"?
If so you may need to add position: relative to the css of the images. I had to do this recently to get images to show under IE6.
I found the info here: http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
Hopefully this helps and good luck!

Related

firefox image display issue

I am working on creating a website with a background that transitions with a fade. I have an issue with display when viewing with Firefox. The site loads fine and cycles through the images, when the point comes for it to return to the first image it resizes to a tiny pic in the top left corner. This does not happen on any other browsers, and it does not happen with all of the images in the cycle. If I refresh the page the problem is fixed and the sizing issue goes. I have tried from other computers and the problem is consistent. A version of the site can be seen http://www.rhys-williams.webspace.virginmedia.com/ Any help with this issue would be a big help thanks.
SOLVED
I have resolved this problem. The issue is caused by the cycle changing quicker than the image loads. I added a second to the display time and it now displays fine :)
Remove div from this line -> so your code will look like:
<div id="slideshowContainer" class="slideshow">
I guess that firefox was confused because of it.
Edit: Also, there are few unclosed tags (html errors), but i think this was the main reason of problems. Also, document has no valid declaration... fix these things, and then try... i have tested locally, with base href, and all works fine?
Hm -> please try to remove this, too: next: '.slideshow'
next option should have selector for next button, if i remember well...

How can I ensure my Javascript Lightbox is layered on top of other content?

Creating my first site and I'm getting this issue with lightbox? I've linked all the CSS, JS files etc. But for some reason it's appearing like below? Any clues?
simply add
z-index: 9999;
to the CSS of the lightbox.
Make sure it is positioned, and it should render on top. although i have seen some lightboxes having problems layering on top of flash before.
Without your source I can just guess, but since you seem to have a lot of layers on your page already, it looks like the lightbox is not coming up on top.
You should check the css for your lightbox, and if not present, add a z-index CSS property to it. Set it to a high number to make sure it ends up in front of everything else.

Abs. positioned element inside Button is not positioned correctly

I'm trying to put an icon inside a button element and I'm getting strange positioning but in Firefox 4. Check out this demo http://jsfiddle.net/j6q2e/3/
It works as expected in Chrome and IE but in Firefox the icon is completely off the reservation. Is that a known bug? Is there a way to fix that?
(I don't want to use <a> because it's a submit button for a form and I want to keep it that way. I also would like to avoid using background-image style because the icon is in a CSS sprite image and to use as background-image I'd have to save it as a separate PNG.)
Just a quick update to get this thing "answered"...
So yeah, this is a bug in Firefox, and still is as of version 5. Chrome, IE9 and Opera all correctly position the icon inside the button.
There is another SO thread dealing with it and here's the Mozilla bug.
You should be able to keep it as a sprite and use it as a background image, just adjust the space around that image to allow for the size of your button. You might want to also consider diagonal sprites to help solve your problem.

problem in Printing A Webpage

There Is A Date Picker Code In my Program (Of Course We Placed A Calendar Picture In The Web Page) The Problem Now Is That How Can We Be Able Not To Include The Picture Of The Calendar Picture In Printing?
Use a specific CSS for printing: http://www.alistapart.com/articles/goingtoprint/
Manipulate the dom (remove the image) before printing and insert it back afterwards.
The picture is most likely a background image. Browsers don't print background images by default. You'll need to activate printing of background images (and colors) in your browsers options.
If that's not a option you'll need to change your code, so that the image becomes a normal image instead of a background image.
First You should clarify what is Date Picker - is it Your custom code, or Jquery's one. If its javascript widget as with Jquery, its a common problem with different browsers. My suggestion would be - try YUI calendar instead, it shows well on IE, Firefox and even old Opera. Example:
http://developer.yahoo.com/yui/examples/calendar/formtxt.html
By the way, Jquery's DatePicker shows well in Firefox 3.6.

Safari does not show images, but FireFox does

I have a website that I am working on: http://keramed.com
in FireFox on my Mac the image on the main page shows up. (The Endoshield DSEK Graft Injector)
Now check in Safari and the image does not show up.
I have tried taking the original .PSD and saving it as a .jpg or .png and it does not matter.
I have commented out all stylesheets and this still does not solve it. The rest of my images are showing up, just not thing one.
I just dont understand I am stumped.
EDIT:> Photoshop says it is an RGB 8-bit image.
Your image isn't showing up in Chromium either. However, taking out the image width and height specified on the image element as percentages has fixed the problem. It is better to avoid using percentages as widths/heights for images as they may not render as well as you'd expect.
It's definitely not the image, as safari can render it, see: http://keramed.com/images/mainimage2.jpg
You are having over-flow: hidden, somewhere and I suspect it's that. Or if you are using js to change the display of the image from none to be shown, that might be failing.
I have had the same problem which I solved changing height/width in pixels rather than percentage.
Another reason for browsers do not display the image — 'content' parameter in stylesheets that are associated with the image.
For example, I faced with the same problem some time ago and it happened because into the stylesheet the class used for the image had 'content' parameter.
.image_class {
...
content: ''
}