Css layout problem 100NP$ for help!

[Albino]

pretty much, I am an idiot. I forgot to test it in IE until It was too late.

Can anyone have a look and see if they can fix it? in the attatchment are the images, the css, the actual page, and also a jpg of how the divs are layed out.

ignore the really bad usuage of class's and id's haha.

thanks to anyone that can help! I might throw some more NP$ in depending on the speed/explanation etc!

 

[lee101]

I was just wondering if it should look as it does in FF, as i see a strip of the background colour there, and was just wondering wheather or not it should be there

edit:
Here's a bit of an updated css file, it looks better in IE but there is an issue with FF now, although neither work great

body{
text-align:center;
background-color:#4D4747;
padding:0px;
margin:0px;
}


#container{
margin-left:auto;
margin-right:auto;
width:889px;
overflow:hidden;
}


	.leftcol{
	float:left;
	width:686px;
	margin:0px;
	padding:0px;
	}
		
		.banner{
		float:left;
		width:686px;
		height:175px;
		background-image:url(images/banner.gif);
		}
		#leftcontainer{
		float:left;
		width:158px;
		margin:0px;
		padding:0px;

		}
			#leftcontainer .leftcoltop{
			height:7px;
			width:158px;
			background-image:url(images/left_col_top.gif);
			background-repeat:no-repeat;
			}
			#leftcontainer .menu{
			float:left;
			width:158px;
			background-image:url(images/menu_main.gif);
			padding:0px;
			height:auto;

			}
		.main{
		float:left;
		padding-right:7px;
		padding-left:5px;
		width:528px;
		background-image:url(images/main_back.gif);
		padding-bottom: 20010px;  /* X + padding-bottom */
		margin-bottom: -20000px;  /* X */
		}
		
		
	.rightcol{
	float:left;
	width:203px;
	background-image:url(images/side_back.gif);
	padding-bottom: 20010px;  /* X + padding-bottom */
	margin-bottom: -20000px;  /* X */
	}
	
		.rightcoltop{
		float:left;
		width:203px;
		height:5px;
		background-image:url(images/right_col_top.gif);
		background-repeat:no-repeat;
		}
	
		.rightcoltitle{
		float:left;
		width:196px;
		height:21px;
		padding:8px 0px 0px 7px; 
		background-repeat:no-repeat;
		font-family: sans-serif;
		font-size:14px;
		background-image:url(images/side_title.gif);
		}
		.rightcolfiller{
		float:left;
		width:196px;
		height:12px;
		}
	

/* Overall Footer */
.footer{
	float:left;
	font-size:11px;
	line-height:20px;
	color:#FFFFFF;
	font-family:Arial, sans-serif;
	width:889px;
	height:20px;
	background-image:url(images/footer.gif);
}

 

[Albino]

hey, Ill check that out.

yea, it looks how it should in FF, if you mean the strip through the left hand side, that is supposed to be there

ok, Ive done it.

I had to change my layout slightly, and use a "_" hack but it is complete and works fine

the reason I had to use the "_" hack, was because ie decided to add a 12px gap under one of my divs, and I can see no reason for this? confusing. thanks anyway lee, some np$ your way for helping