CodingForums.com - graphic not displaying with absolute positioning

Hey all,

I have a masthead div which I set as a reference point using position relative. Now I want to display two images, one a login and one a logo. The login graphic is actually two graphics that change position depending on hovering state. The other is just an image of a logo. Now when I try to display the page, the logo doesn't appear at all, and the login graphic displays but it appears another instance of it is hanging off the page. I attached the result. Here is the coding causing the issue:

Code:

<style type="text/css">

        * {

                margin: 0;

                padding: 0;

        }

        

        body {

                font: normal normal normal .9em 'Trebuchet MS', Tahoma, Verdana, 'Optima', sans-serif;

                background-color: #fff;

        }

        

        #wrapper {

                width: 1024px;

                position: relative; 

                left: 50%;

                margin-left: -512px;

        }

        

        #masthead {

                height: 130px;

                position: relative;

                background: #b8e5d1 url(mastgrad.png) top left no-repeat;

        }

        

        #logo {

                position: absolute;

                left: 300px;

                top: 30px;

        }

        

        #logo a {

                height: 316px;

                width: 183px;

                display: block;

                background: url(logo.png) top left no-repeat;

                border: none;

        }

        

        #logIn {

                position: absolute;

                left: 875px;

                top: 30px;

        }

        

        #logIn a:link, #logIn a:visited {

                height: 27px;

                width: 114px;

                display: block;

                background: #65c298 url(logingradsprites.png) top left no-repeat;

                border: none;

                text-align: center;

                font: bold normal small-caps .8em Trebuchet, Tahoma, Verdana, 'Optima', sans-serif;

                /* text-transform: uppercase; */

                text-shadow: #3c3c3c 2px 2px 3px;

                color: white;

                text-decoration: none;

        }

        

        #logIn a:hover, #logIn a:active {

                background-position: bottom left;

        }

        

        

</style>

</head>

<body>

        <div id="wrapper">

                <div id="masthead">

                        <div id="logIn">

                                <a href="contact.htm" title="login">LOGIN</a>

                        <div>

                                <div id="logo">

                                        <a href="index.html" title="logo"></a>

                                </div>

                </div>

        </div>

</body>

</html>

Thanks for any response