and I have tried to use the Alpha 1 channel in photoshop with a green background for the base thing and it doesnt seem to work.

By default Photoshop has pretty screwy support for PNG files.

There's two ways of working with transparency in Photoshop.
1) This is the way you're currently working. You've only got 3 channels (RGB), but photoshop allows pixels to also be semi-transparent (magically) -- it does this without exposing a separate transparency channel. This is normally fine when working on web-pages, etc, but is very bad for games.
The reason is that in games, your image will be loaded into an RGBA texture, and the RGB values of invisible pixels are still very important! e.g. they are used during mip-mapping.
In this mode, Photoshop doesn't care about the colour values of invisible pixels, because it assumes that they'll never be used, but in games they are used. It seems that Photoshop is writing out "white" for transparent pixels with your texture, which is very bad...

2) The alternative is to ensure your background layer is opaque, and to use a new "Alpha 1" to encode transparency. I can convert your file to this mode by ctrl+clicking "layer 0" (select visible pixels), go to channels tab, click 'Save selection as channel'. Then I can add a background layer and fill it with a sensible background color.
However, as you've noticed, Photoshop's default PNG plugin is too stupid to respect this mode, and ignores your alpha channel when saving. You can fix this by deleting png.8bi (may want to keep a backup!) and replacing it with a better one (I forget which one I used to use, but yes I've had to delete png.8bi in the past and replace it with a better version. I assume this is why someone suggested you use SuperPNG -- it allows you to properly save your alpha channel).
Also, because Photoshop+PNG is a bit unreliable in this way, you should never use PNG as a working format (i.e. never open one for editing) but should only use it as an export/final format.

[edit]An alternative is to simply not use PNG files -- in my current game, I use TGA files, which the tool-chain compiles into DXT-compressed files for the game's use[/edit]

Once you've fixed your processes so that you can save PNG files that have 'coloured' transparent pixels, you've got two more choices:
A) Design your image to be drawn with "traditional alpha blending", by ensuring that transparent pixels have the same colour as their closest opaque pixel. In your case, you can do this by adding a green background layer, though in the general case you have to use a process called 'dilation'.
B) Design your image to be drawn with "premultiplied alpha blending", by ensuring that transparent pixels are black. You can do this by adding a black background layer.
These two options look like:


On the code side, if you choose (A), your graphics programmer needs to use the blend mode of [font=courier new,courier,monospace]src=SrcAlpha, dst=InvSrcAlpha[/font] or if you choose (B) they need to use the blend mode of [font=courier new,courier,monospace]src=One, dst=InvSrcAlpha[/font].
Both are valid choices. Traditionally (A) is more popular, but I personally prefer (B) because it's simpler and is also compatible with DXT1 compression.

That "small issue" is happening because you haven't sorted your transparent objects to be drawn from back to front. You're drawing the one in the foreground first, and even though it's transparent there, it's still nonzero alpha, and so it makes writes to the z-buffer. When the one behind it is drawn, it is not drawn "overtop" of the nearer geometry.

While I'm mentioning it, opaque objects (those with no alpha whatsoever) should be sorted to draw from front to back, to take advantage of Z-occlusion, instead of being repeatedly overdrawn and wasting shader cycles.