Header problem in IE been killing me all day!

programming web dev
1

Hi, been having a hard time with IE, as you can see by my attachment the problem, space between the header and navigation_wrap.

Thanks inadvance!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>



<head>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <meta name="author" content="fxpforce">



    <title>Untitled 6</title>

    <style>

body {
    background: #fff url(images/header_bg.png) repeat-x;
}    

/* Header */
#header {
    margin: 0 auto;
    z-index: 1000;
}

#header .gradient {
    position: absolute;
    left: -120px;
    top: 0;
}
#navigation_wrap {
    position: relative;
    top : 93px;
    height: 2.5em;
    background: #4e4138 url(images/navigation_bg.png) repeat-x 0 0;
    border-bottom: 1px solid #fff;
    }
#navigation {
    position: relative;
    height: 2.5em;
    width: 1002px;
    margin: 0 auto;
}
</style>

</head>



<body>

<!-- header -->

<div id="header">
<img src="images/header_gradient.jpg" alt="" class="gradient" />
</div>

<div id="navigation_wrap"></div>
<div id="navigation"></div>



</body>

</html>