Transparency problem in FF (but works in IE7)

programming web dev
1

I’ve got a bit of a problem. Here’s the goal: to have a dark strip going across the window overlapping the logo graphic, so to speak. The navigation is located on this strip.

What I have done to try to realize it:

<div id="header">
    <div id="logo"></div>
    <div id="navigation">
        <div id="menu">
            <dl>
                <dt><a href="./">Home</a></dt>
                    <dd>Features important updates and upcoming events.</dd>
                <dt><a href="./">Page Two</a></dt>
                    <dd>Hello World!</dd>
                <dt><a href="./">Page Three</a></dt>
                    <dd>Hello World!</dd>
                <dt><a href="./">Page Four</a></dt>
                    <dd>Hello World!</dd>
            </dl>
            <div id="search">search</div>
        </div>
    </div>
</div>

CSS:

#header {
    width: 100%;
    height: 140px;
    background: #000080 url('images/headbg.png') repeat-x scroll center center;
}
#header #logo {
    height: 100px;
    width: 700px;
    margin: 0 auto;
    background: transparent url('images/logo.png') no-repeat scroll center top;
}

/* NAVIGATION */
#navigation {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    background: transparent url('images/navbg.png') repeat scroll center center;
}
#navigation #menu {
    width: 700px;
    clear:  both;
    margin: 0 auto;
    background: transparent url('images/navlogo.png') no-repeat scroll left top;
}

headbg.png is simply dark gradient
logo.png contains “National Honor Society” and the top (white) part of the grass/flowers
navbg.png is semi-transparent black pixel
navlogo.png has the bottom (dark) part of the grass/flowers

This is how the two browsers render the page:

I don’t know if it’s a problem with my code or if it’s a fault on FF’s side but I would appreciate any help.

Thank you very much for your time.