help with IE

[mackhouse]

Hello, i am new to CSS basically web design so i am just trying to hack away as i go. I have redesigned the look of my blog and so far everything is going really well in Firefox and every other browser except for IE.Here is a link to the site as it should look thus far(use Firefox):My Webpage Here is the CSS:

/*Theme Name: Mackhouse05Mackhouse Design October 2006Author: Troy Mack*//* ************** STRUCTURE ************** */body {background-color: #000000;	background-image:  url(/testblog/wp-content/themes/mackhouse05/images/bg.gif);	background-attachment: scroll;	background-repeat: repeat-x;	width: 100%;	height: 100%;	margin: 0px;	padding: 0;	text-align: center;}/* ************** HEADER ************** */.center {position: relative; 	display: block; 	width: 920px; 	margin: 0 auto; 	text-align: center;}#header{	position; relative;	display: block;}#movie{	position: relative;	top:-270px;}#headbord{	position: relative;	top: -545px;}#page01 #nav01 a, #page01 #nav01 a:visited,#page02 #nav02 a, #page02 #nav02 a:visited,#page03 #nav03 a, #page03 #nav03 a:visited,#page04 #nav04 a, #page04 #nav04 a:visited,#page05 #nav05 a, #page05 #nav05 a:visited {	background: url(/testblog/wp-content/themes/mackhouse05/images/nav.jpg) top left #fff; color: #A0DCF8; font-weight: bold !important;}#page01 #nav01 a span,#page02 #nav02 a span,#page03 #nav03 a span,#page04 #nav04 a span,#page05 #nav05 a span {	background: url(/testblog/wp-content/themes/mackhouse05/images/nav.jpg) top right #fff;}#nav:hover {	padding-top: 0px; 	height: 40px;}#nav:hover a:hover,#page01 #nav:hover #nav01 a,#page02 #nav:hover #nav02 a,#page03 #nav:hover #nav03 a,#page04 #nav:hover #nav04 a,#page05 #nav:hover #nav05 a {	position: relative; 	top: 0px;}#nav {	position: relative; 	top: -561px; 	float: none;	display: block; 	height: 40px; 	list-style: none; 	overflow: hidden;}#nav li {	float: left; 	background: none !important; 	padding: 0 !important;}#nav a, #nav a:visited {	position: relative; 	float: left; 	display: block; 	height: 40px; 	overflow: hidden; 	width: 160px; 	padding: 8px 10px 2px 90px; 	text-align: left; 	background: url(/testblog/wp-content/themes/mackhouse05/images/nav.jpg) top left #fff; 	margin-left: -40px;  	color: #DC9C30; 	text-decoration: none; 	font-weight: bold !important;}* html #nav a, * html #nav a:visited {	margin: 0; 	border-left: 1px solid #2C3E45 !important;}#nav a span {	position: absolute; 	right: 0; 	top: 0; 	display: block; 	width: 0px; 	height: 40px; 	background: url(/testblog/wp-content/themes/mackhouse05/images/nav.jpg) top right #fff;}* html #nav a span {	right: -1px;}#nav a:hover {	background: url(/testblog/wp-content/themes/mackhouse05/images/nav.jpg) top left #fff;}#nav a:hover span {	background: url(/testblog/wp-content/themes/mackhouse05/images/nav.jpg) top right #fff;}///// POSTS ETC. ///.pagerow {	float: left; 	width: 920px;}.entrycol {	background: url(/testblog/wp-content/themes/mackhouse05/images/post_bg_middle.jpg) top left #000000;	float: left; 	display: block; 	width: 475px; 	padding: 5px 0 0 0px;	margin-top: -570px;	margin-bottom: 0;	text-align: left; }.pagetitle {	background: url(/testblog/wp-content/themes/mackhouse05/images/journal_title_bg.png);	background-repeat: no-repeat;	float: left;	display: block;  	width: 455px;	height: 69px; 	margin-left: 10px;	padding: 0px 0px 0px 15px;}#content {	display; block;	float: left;	padding: 0px 0 0 0px;	width: 475px;}.box_topper{	margin-top: 10px;		margin-left: 10px;		background: url(/testblog/wp-content/themes/mackhouse05/images/box_topper.png) no-repeat;	font-size: 0;	width: 465px;	height: 54px;}.box_middle{	margin: 0px 0px 0 10px;		background: url(/testblog/wp-content/themes/mackhouse05/images/box_middle.png);	width: 465px;}.box_middle p{	margin: -10 20 10 10;	clear: right;	padding: 1px 7px;	text-align: left;}.box_bottom{	margin: 0 0 0 10px;		background: url(/testblog/wp-content/themes/mackhouse05/images/box_bottom.png) no-repeat;	font-size: 0;	width: 465px;	height: 60px;}.titleimg {	position: relative; 	float: left; 	margin: -60px 0px 0px 10px; 	padding: 0px 0px 0px 4px; 	width: 27px; 	height: 50px; }.box_middle h3{	margin: -40px 0 0px 50px;}.box_middle h3 a:hover{	color: #342112; }.entry{	display: block;	float: left;	margin: 30px 20px 20px 20px;	width: 430px;}h1 {	font-size: 1.9em; 	color: #342112; 	margin: 5 0 0px 0; 	padding: 0;}* html h1 {margin: 0;}h2 {	font-size: 1.4em; 	color: #342112; 	margin: -3 0 0px 0; 	padding: 0;}* html h2 {font-size: 1.4em;}.journaldate {	margin: -10 0 0 10;	float: left; 	display: block; 	padding: 1px 7px;  	font-size: .8em; 	color: #38687f;}.commentlink {	margin: -10 30px 0 0;	float: right; 	display: block; 	padding: 1px 7px;  	font-size: .8em; 	color: #38687f;}.commentlink a{	font-weight: bold;	text-decoration: none;	color: #38687f;}h3 {	font-size: 1.4em; 	color: #342112;	float: left;  	overflow: hidden; }h3 a {	text-decoration: none;	color: #38687f;}* html h3 {	margin: 0 0 0 2px;}h3 span {	float: left; 	display: block; 	height: 20px;}h4 {	text-transform: uppercase; 	margin-bottom: 8px; font-size: 1.1em;}h1, h2, h3, h4 {clear: both;}/* **************** FOOTER *************** */#footer {	background: url(/testblog/wp-content/themes/mackhouse05/images/nav.jpg);	text-align: center;	clear: both;	height: 40px;	width: 920px;}#footer p { 	font-size: .7em;	font-weight: bold;	color: #DC9C30;	padding-top: 4px;	padding-bottom: 0px;}#footer a {	color: #A0DCF8;	text-decoration: none;}#footer a:hover {	color: #ffffff;	text-decoration: none;}

and here are the php pages:index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />	<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>		<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />	<LINK REL="SHORTCUT ICON" HREF="http://www.mackhouse.ca/favicon.ico">		<?php wp_get_archives('type=monthly&format=link'); ?>	<?php wp_head(); ?></head><body>	<div id="header"><img src="http://www.mackhouse.ca/testblog/wp-content/themes/mackhouse05/images/header_bg.jpg" />	<div class="center">	    	<div id="movie"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0" width="700" height="270"><param name="movie" value="http://mackhouse.ca/testblog/wp-content/themes/mackhouse05/movies/header03.swf"><param name=quality value=high><param name="wmode" value="transparent" /><embed src="http://mackhouse.ca/testblog/wp-content/themes/mackhouse05/movies/header03.swf" quality=high wmode="transparent" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="700" height="270"></embed></object> </div><div id="headbord"><img src="http://www.mackhouse.ca/testblog/wp-content/themes/mackhouse05/images/header_border.png" /></div><ul id="nav">      <li id="nav01"><a href="http://www.mackhouse.ca/testblog">HOME<span> </span></a></li>      <li id="nav02"><a href="http://www.mackhouse.ca/testblog">GALLERY<span> </span></a></li>      <li id="nav03"><a href="http://www.mackhouse.ca/testblog">FUN & GAMES<span> </span></a></li>      <li id="nav04"><a href="http://www.edmerritt.com/about.php">ABOUT US<span> </span></a></li>	 </ul>       </div>  </div>

header.php:

<link rel=stylesheet href="/pngHack/pngHack.css" type="text/css"><body id="page01"><?php get_header(); ?>	 <div class="center">		<div class="entrycol">	<div class="pagetitle">		<h1>Journal</h1>	  	<h2>The lastest entries to the journal</h2>	 </div>	 	<div id="content">	 <?php if (have_posts()) : ?>				<?php while (have_posts()) : the_post(); ?>			 <div class="box_topper"> </div>	 	 	 <div class="box_middle">	 <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>	 <img src="<?php bloginfo('stylesheet_directory'); ?>/images/<?php the_author() ?>.png" class="titleimg"/>	 <p class="journaldate"><span><?php the_time('F jS, Y') ?> @ <?php the_time('g:i a') ?></span></p><p class="commentlink"><span><?php comments_popup_link('No comments »', 'Just one comment »', 'Wow % comments »'); ?></span></p>	 <p><?php the_content('Read the rest of this entry »'); ?></p>	 	 		  </div>	  	   <div class="box_bottom"> </div>		<?php endwhile; ?>		<?php else : ?>			<h2 class="center">Not Found.</h2>		 Search something maybe? <?php include (TEMPLATEPATH . '/searchform.php'); ?>		<?php endif; ?>	</div>	</div><?php get_footer(); ?></div>

Any help would be greatly appreciated or at least a pointing in the right direction.Thanks

[jesh]

The first thing I notice is that you have at least one </div> tag that is missing a corresponding <div> tag. Look just after your <ul></ul> navigation element. That might help solve it.

[Tarte]

I also believe that the missing </div> in Header.php could be the problem.

[mackhouse]

Thanks for the suggestions guys. I gave it a try and didn't seem to affect anything.

[jlhaslip]

so, ummm, what exactly is it doing (or not doing) for you in IE?

[mackhouse]

If you take a look at it in firefox you will see what it should look like. Then take a look in IE. here is the link: The Site

[jesh]

Another </div> is floating around in your code:

</html></div><!-- Dynamic Page Served (once) in 0.194 seconds -->

And I also noticed this (dunno if this could cause anything):

<p><p>Finally! We have come up with a new design.... </p><p>So now it is getting it all to work properly....</p><p> </p></p>

Neither of these will probably solve your issues, but it always helps to have clean markup.I would suggest looking into all the floats and large negative positions that you are using in your CSS. Since your navigation is way at the top of the page in IE, I might suggest looking here first:

#nav {position: relative;top: -561px;float: none;display: block;height: 40px;list-style: none;overflow: hidden;}

[jlhaslip]

If you take a look at it in firefox you will see what it should look like. Then take a look in IE. here is the link: The Site

Some of us are fortunate enough to NOT have a copy installed