Help needed – IE6 problem! (SOLVED) :-)

[cjc7]

Doing a small project for my course but seem to run into trouble when viewing in IE6, seems to be a white gap between where my header (will eventually be!) and my nav bar. Seems OK in FF and Safari if that helps!

http://cor02024731.modusinternet.net/karate/karate.html

Code:

@charset “UTF-8”;
/* CSS Document */

/* RESETS PAGE AND BASIC SETUP */

* {margin: 0; padding: 0;}

body {font: 62.5% Helvetica, Sans-Serif;
background-color:#ffffcc;}

ul {list-style:none inside;}
p {font-size:1.6em; line-height:1.2em; margin-bottom:1.2em;text-align:justify;}
p.metadata{background-color:#fff9a7; padding:3px;}

a {outline:none;}

a img {border:none;}

h1 {font-family:Serif;
color:#a69028;
font-weight:bold;
font-size:3.6em;
font-style:italic;
}

#clear {clear:both;}

/* ENDS BASIC SETUP */

/*PAGE STRUCTURE */

#page-wrap {
width:800px;
margin:0 auto;
overflow:hidden;
background:url(../../images/content-bg.jpg) repeat-y;
}

ul#nav li {display:inline;}

ul#nav li a {display:block;
height:67px;
text-indent:-9999px;
float:left;
}

ul#nav li.home a {width:222px;
background:url(../../images/nav-home.jpg) bottom center no-repeat;
}

ul#nav li.courses a {width:172px;
background:url(../../images/nav-courses.jpg) bottom center no-repeat;
}

ul#nav li.training a {width:173px;
background:url(../../images/nav-training.jpg) bottom center no-repeat;
}

ul#nav li.other a {width:233px;
background:url(../../images/nav-about.jpg) bottom center no-repeat;
}

ul#nav li a:hover {background-position:center center;}

ul#nav li a:active {background-position:center top;}

#main-content {padding:30px 50px 30px 50px;}

#footer {min-height:136px;
background:url(../../images/footer-bg.jpg) no-repeat;
}

#article-area {
width:580px;
float:left;
}

#sidebar {float:right;
width:72px;
}

#sidebar .japanesetext {
padding:10px 0px 40px 0px;
}

/* END PAGE STRUCTURE */

If anyone can advise me how to fix this id be very grateful!

Thanks in advance!

[Author]

Posts