Solved

PNG image not displaying Safari

Posted on 2007-11-26
3
1,124 Views
Last Modified: 2013-12-25
I have recently developed this source code. I have now got around to checking it for cross-browser compatibility. I have used www.browsercam.com and it produced the following view (http://www.gordondent.co.uk/compat/safari_view.jpg) for the following page:
http://www.gordondent.co.uk/fpp/about/?page=staff&person=alison

Basically the side image does not appear in Safari and I do not understand why. It is a PNG file that is approximately 250Kb in size. I am thinking it is something to do with the size of the image as the text header saying Alison Brazier is also a PNG.

Please can someone give me some pointers. I can't really use a jpg or gif as I need the high quality transparency that PNG-24 offers.

0
Comment
Question by:Gordy1984
  • 2
3 Comments
 
LVL 19

Accepted Solution

by:
darron_chapman earned 500 total points
ID: 20353357
I believe the z-index: -1; is making Safari place the picture behind the background.  Remove that from #contentB #sideImage  in the style_a.css style sheet file.
#contentB #sideImage {

	position: absolute;

	top: 51px;

	left: 0;

	width: 97.775%;

	height: 296px;

	z-index: -1;

}

Open in new window

0
 

Author Comment

by:Gordy1984
ID: 20353584
Thank you! I was too busy thinking it was something to do with PNG images.

0
 

Author Closing Comment

by:Gordy1984
ID: 31411081
Very quick response, couldn't have asked for more.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now