keep transparency in image

The 3 "lights" in the header should have a transparency in the upper portion of the image which is at the top of the browser.  I saved image as .png.  It shows it is transparent but when put into website it the transparent area turns white.  I event created a div for the lights image but that didn't help any.  I tried saving .png with a yellow matte background but that didn't work either.

screenshot of how it is supposed to look.
http://screencast.com/t/jGMyw1AuC

beta page
http://nsitedesigns.com/nsitedesigns/flipse/index.html
nsitedesignsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sammySeltzerCommented:
I don't think that whatever you used for converting that image to transparency worked.

Take a look the same image that I converted to transparency using photoshop.

I called it back1.png
back1.png
0
nsitedesignsAuthor Commented:
I cannot view your image
0
nsitedesignsAuthor Commented:
here is screen shot of lights.png file.  It shows transparency.
http://screencast.com/t/mEVC7dnyyj
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GaryCommented:
Can you attach the image.
0
nsitedesignsAuthor Commented:
i did earlier.  here it is again.
0
nsitedesignsAuthor Commented:
i wonder if something isn't working right on ee.  I cannot view image someone else attaached and you guys can't see the image i attached.
0
GaryCommented:
Remove float:left on the image
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GaryCommented:
After the above...
Add display:block to the image

(press submit by mistake)
0
Dave BaldwinFixer of ProblemsCommented:
I can see it.  You need to give "container_lights" class the same height as the image (72px).  Then you will probably want to remove the border around it.
0
nsitedesignsAuthor Commented:
Wahoo - display block worked!  Thanks Gary (and others)  for your quick advise.
0
GaryCommented:
^^^^
Easier solution
(actually both as easy ;o)

Curious why it's happening though
0
Dave BaldwinFixer of ProblemsCommented:
A 'div' with no height and without a 'clear' doesn't push down the next 'div' which has a background color of white.  I would remove all unused CSS like the font specs that aren't going to be used in that 'div'.  It's looks like standard Dreamweaver "we're going to help you out" code.
0
GaryCommented:
Ahh yeah, never clicked (too hungover)
Dave probably deserves half the points as his solution is just as relevant
0
nsitedesignsAuthor Commented:
I added height to container-lights as recommended  as a good practice even though it looks good without.  Dave, there is no border to remove or font specs in the container-lights div.  Not sure what you are talking about.

.container_lights {
      width: 948px;
      margin: 0 auto;
      padding:0px;
      display:block;
      height:72px;
      
}
0
Dave BaldwinFixer of ProblemsCommented:
I think maybe the border I saw was from using Firebug and WebDeveloper at the same time so never mind.
0
nsitedesignsAuthor Commented:
you are crazy like that!

lol
0
Dave BaldwinFixer of ProblemsCommented:
Hmmph!!  I am Perfectly Normal!!
0
nsitedesignsAuthor Commented:
sure - just like the rest of us!
0
Dave BaldwinFixer of ProblemsCommented:
EggZactly!!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.