Forums

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:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
		<title>Calvary Chapel Westminster</title>
		<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
	</head>
	<body>
		<div id=\"page-wrap\">
			<div id=\"main-header\">
				<ul id=\"header-nav\">
					<li class=\"logo\"><a href =\"#\">Logo</a></li>
					<li class=\"who\"><a href =\"#\">Who?</a></li>
					<li class=\"where\"><a href =\"#\">Where?</a></li>
					<li class=\"when\"><a href =\"#\">When? </a></li>
					<li class=\"why\"><a href =\"#\">Why?</a></li>
					<li class=\"what\"><a href =\"#\">What?</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

Here is the CSS Source:


/*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

treehouse : what would you like to learn today?

Forums

float left vertical alignment problem