Png not working

timmytots · #1 May 9th, 2006, 13:42

I'm trying to do a shadow around the main wrap of my webpage:

www.crewsfx.com/greenginger

I use a Mac and it's fine on that, but on PC it doesn't work - it just goes grey or blue. I exported the shadow as a PNG from within Flash, then I opened it in Photoshop and saved it as a PNG, still no luck. What do you have to do?

I need it as a PNG so that the texture background shows through too. Can you use gifs or something, or what?

Thanks.

lesleindotcom · #2 May 9th, 2006, 13:56

It is not a PC problem it is a Internet Explorer problem;
http://www.alistapart.com/articles/pngopacity/
http://homepage.ntlworld.com/bobosola/

It looks good in FF

timmytots · #3 May 9th, 2006, 14:12

how has he done it then?:

http://www.tokyocube.com/main.php

it works in ie on pc

lesleindotcom · #4 May 9th, 2006, 14:37

The wrapper or container background is a gif file
http://www.tokyocube.com/img/bg/bg_page_shading.gif

timmytots · #5 May 9th, 2006, 16:08

thanks. how stupid of me not to think of that. However, this must mean he's made a gif that is wide enough to exceed the width of all browsers. is that correct?

Actually, i'm having problems with exactly how this achieved. Do you set the image as the background for the body? I've tried this and it doesn't centre. I've made an image that is 1500 px wide, has nothing in the centre 750px and has the line texture around the edge. But it doesn't work right. It doesn't go centred and it doesn't tile how i expected.

Legacy_Staff · #6 May 9th, 2006, 20:47

You could do it with three same-width images from the same file;
Split out the header and place it at the top of the page.
The footer at the bottom.
Then make a vertically repeating 1 px high image the page background.
Centre the lot, so they appear as one, and away u go.

The repeating 1px image will save on your page's size as well.

timmytots · #7 May 9th, 2006, 21:11

I don't think u understand the predicament but...

I found this code:

background: #F2F2F2 url("../img/bg/bg_page_shading.gif") repeat-y top center;
text-align: center;

That obviously is the code for the body in the css, but i've done that for mine with no luck. What is the background image supposed to be? Size etc. Mine doesn't centre, it goes off to left.

cheers

Legacy_Staff · #8 May 9th, 2006, 22:10

body { text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:76%;background:#f2f2f2 url('../img/bg/bg_page_shading.gif") repeat-y top center; }

Try this.
It's one of mine, into which I have pasted yr .gif details.
You can see which bits you may need to play with to suit your particular page.

Re the shade around the frame, I use an 'outer glow' on the frame ('wrap') layer and change the colour to grey (dark as you need and adjust the opacity). Change the layer style to 'normal'. This will give you a shadowy effect all around your page frame.

I do this all in one file and then carve it up into three separate images (as above) and insert separate coding for each into the new page.

Legacy_Staff · #9 May 10th, 2006, 09:49

Something else just occurred to me.

You will probably need to use jpg format.

The gradient used in a glow/shadow effect would appear too blocky/stripey if you use gif.

lesleindotcom · #10 May 10th, 2006, 14:03

You could just use this
http://homepage.ntlworld.com/bobosola/pnghowto.htm

darryladie · #11 May 13th, 2006, 15:26

Script to correct transparency in IE:

Code: Select all

<head>    <!--[if lt IE 7]> <script type="text/javascript" src="JS/correctPNG.js"></script> <![endif]--></head>

Code: Select all

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      for(var i=0; i<document.images.length; i++)
      {
         var img = document.images[i]
         var imgName = img.src.toUpperCase()
         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
            var imgID = (img.id) ? "id='" + img.id + "' " : ""
            var imgClass = (img.className) ? "class='" + img.className + "' " : ""
            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
            var imgStyle = "display:inline-block;" + img.style.cssText 
            if (img.align == "left") imgStyle = "float:left;" + imgStyle
            if (img.align == "right") imgStyle = "float:right;" + imgStyle
            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
            var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
            img.outerHTML = strNewHTML
            i = i-1
         }
      }
   }    
}
window.attachEvent("onload", correctPNG);

Rob · #12 May 14th, 2006, 07:06

Quote:

Originally Posted by lesleindotcom

You could just use this
http://homepage.ntlworld.com/bobosola/pnghowto.htm

I dont think there is a fix for IE that works with BACKGROUND images.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS not working in IE?	Jgag	Web Page Design	2	Jun 5th, 2008 11:14
PNG - IE not working	Phixon	Web Page Design	3	Nov 30th, 2007 13:47
php not working?	gsquare567	PHP Forum	10	Apr 24th, 2007 18:52
PHP not working	toolmania1	PHP Forum	1	Nov 1st, 2006 05:57

		Webforumz.com > Main Forums > Design Your Website > Graphics and 3D
Png not working