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: ''
}
Related
I have searched for a couple hours on this topic, to no avail. When I view my site on mobile via Safari, sometimes pieces of the background image are missing. For instance, everything will look great, but then there will be a chunk missing in the middle. Or, perhaps instead there will be a chunk missing from the bottom. It appears to be random. Then, if I turn the phone, the missing piece fills in and even if I turn it back to portrait mode, the piece has filled in.
Any ideas as to why a section of an image won’t load? Could it be that the image is too big? Just looking for some ideas to get started with. Unfortunately, I haven’t come across this problem in my searches. Thanks.
Images should not be missing chunks. If it is a JPEG image, there is the tiny possibility your image is being corrupted in transit. Is the image being created dynamically?
But the most likely cause is that you have some html element over the top of the image that is opaque - and preventing the underlying image from being displayed.
In the following link there are strange black patterns at the top of the page that only show up on mobile devices, I checked on 2 different android devices that had the same case, but on my desktop computer it does not show up even when using different viewports.
The link: http://dshift.totalh.net/blog/solving-the-mossad-challenge/
A photo of the strange phenomenon:
There are weird black patterns on the top as you can see. How do I go about removing them? I have yet to identify the cause of the issue as well.
EDIT: I changed the picture with a higher res version, though the border had receded a bit, it's still there unfortunately, and making the image any larger will start to affect load performance. I'll update if i find another solution.
I think it's, as i've told in the comments, something with the resolution of the image. You're able to check if it is the background-image causing the problem by changing the background to e.g. the following:
body {
background-color: white;
}
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...
I am in the final stages of developing a website for a client and am having much difficulty figuring out how to prevent a small flower image from inheriting the transparency of it's parent element.
I first tried making the image independent, using absolute positioning in the css. This worked; however, it introduced an alignment issue depending on the size of the browser window and size the the monitor and also the operating system. I was able to eliminate (somewhat) the browser issue by adding in browser selection javascript and adding the requisite css code to check for each browser, but I was still running into the alignment issue depending on the size of the browser window and size of the monitor screen.
To view the page with the independent floating (flower image), please see the following url:
mauisunsetb122.com/index5.html
I then decided to tie the image to the adjoining text so that no matter the size of the browser window or monitor, the image will always be anchored to the text. this is where the transparency issue occurred. To see an example of this please see the following url:
mauisunsetb122.com/index5_8.html
I tried resolving the issue by following the example found at the following url, but it didn't work:
http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack
Thanks in advance for your assistance!
If you wish to make the background transparent and not have the child elements inherit this then you have several options:
Use a small PNG with transarency as the background image.
Set the background color using rgba 'background-color: rgba(255,255,255,0.5);'
Use horrible css hacks
Generaly 1 seems to be the most used and supported.
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!