float left vertical alignment problem

[bostitch]

I’m just starting to play around with CSS using it to cut a graphic into a website. I’m working on the menu bar that goes along to top and for some reason they are not aligning to the top of the webpage in IE.

Here is a link to the website:
http://uk.geocities.com/bradnjones/Index.html

Here is the HTML source:

Code:

• Logo
• Who?
• Where?
• When?
• Why?
• What?

Here is the CSS Source:

Code:

/*RESET & BASIC PAGE SETUP*/
{ margin: 0 auto; padding: 0; }
html { overflow-y: 0; scroll; }

body {
font: 62.5%; Helvetica, sans-serif;
background: url(images/body-bg.jpg) top;
}

ul { list-style: none inside; }
p { font-size: 1.2cm; line-height: 1.2cm; margin-bottom: 1.2cm; }
a img { border: none; }
/*END RESET*/

/*STRUCTURE AND STUFF*/
#page-wrap {
width: 552px;
margin: auto;
background-color: green;
}
#main-page {
background: url(images/pane1-text.jpg) repeat-y;
float: left;
}

#main-header{
background-color: blue;
}

ul#header-nav {
margin-left:-40px;
}
ul#header-nav li {
display: block;
}
ul#header-nav li a {
display: block;
text-indent: -9999px;
float: left;

}
ul#header-nav li.logo a {
width: 197px;
height: 114px;
background: url(images/ccw-logo.jpg) bottom center;
}
ul#header-nav li.who a {
width: 115px;
height: 69px;
background: url(images/nav-who.jpg) bottom center;
}
ul#header-nav li.where a {
width: 64px;
height: 69px;
background: url(images/nav-where.jpg) bottom center;
}
ul#header-nav li.when a {
width: 57px;
height: 69px;
background: url(images/nav-when.jpg) bottom center;
}
ul#header-nav li.why a {
width: 46px;
height: 69px;
background: url(images/nav-why.jpg) bottom center;
}
ul#header-nav li.what a {
width: 73px;
height: 69px;
background: url(images/nav-what.jpg) bottom center;
}

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

/*END STRUCTURE */

Any guidance on how to get the "who", "what", "where", "when" and "why" images to be aligned accross the top of the page would be greatly appreciated!

Best Regards

[Author]

Posts