Background .png not showing in Chrome and Firefox

Question

I must be missing something completely obvious here, but can't find anything online to tell me otherwise.

I'm trying to pull a .png into a page using:

background:url(img/runner1.png) no-repeat;

I know the path is correct because doing the same with a jpg works:

background:url(img/header.jpg) no-repeat;

It does seem to work in Safari, but not in Chrome or Firefox.

Am I missing something here?

---

EDIT - I am using:

#runner1{
background:url(img/runner1.png) no-repeat;
float: left;
border: 1px solid #FFF;
width: 195px;
height: 205px;
}

for the following element:

<div id="runner1"></div>

The page is just running locally from my desktop (so no server involved).

As mentioned previously the paths aren't the problem because a jpg from the same directory works.

Firebug says:

runner1.png 
GET
Success
image/png
index.html:201  
0B  
8ms

But I can't see the preview or response in Firebug.

Also accessing the file directly returns the same result.

Answer 1

Solved!

It would appear that saving PNGs with Photoshop creates a PNG which isn't compatible with chrome or firefox. So instead, I opened the file with Fireworks, re-saved and the pngs are working.