I'm Stumped

[uholyprayer]

I need help with my css/html coding. This is the location of my template:http://www.stormgaming.net/stormcreations/The banner is overlapping the green divider bar when it's not supposed to. Another problem is that the middle bar goes past the margins and the navigation menu below it on the right side. There is also a green block above and below the right side navigation menu. The copyright bar at the bottom does not go all the way across the page(with correct margins, it should not go past each of the navigation menus. I am having a great deal of trouble with these problems and was wondering if anyone can help me. You can see the html by looking at the page source. Here is the css file:

body { background-image: url(images/background.gif);	   background-attachment: fixed;	   font-size: 10px;	   color: #000000;	   font-family: verdana;	   margin-top: 0px;	   margin-bottom: 0px;	   margin-left: 41px;	   margin-right: 41px;	   background: #6a946a url(images/background.gif) repeat-y 50% 0;	   text-align: left;}td { font-family: verdana; 	 font-size: 10px;}a:link, a:hover, a:visited, a:active { color: #FFFFFF; }.wrapper { background-color: #transparent;		   margin-top: 0px;		   margin-bottom: 0px;		   color: #000000;		   margin-right: 0px;		   margin-left: 0px;		   text-align: left;		   }.navtable { background-color: #396339;}.linkrow { background-color: #6a946a;		   text-align: right;		   padding: 3px;		   color: #FFFFFF;		   font-family: verdana;		   font-size: 10px;		   margin-bottom: 0px;		   border-bottom: 1px solid #396339;		   border-right: 1px solid #396339;}.linkrowhover { background-color: #396339;		   text-align: right;		   padding: 3px;		   color: #FFFFFF;		   font-family: verdana;		   font-size: 10px;}.linkrow a:link, .linkrow a:hover, .linkrow a:visited, .linkrow a:active { color: #FFFFFF; }midbar {  background-image: url(images/midbar.gif);		  #FFFFFF;		  padding: 5px;		  text-align: center; 		  vertical-align: middle;		  font-family: verdana;		  font-size: 10px;		  margin: 0px;} .midbar a:link, .midbar a:hover, .midbar a:visited, .midbar a:active { color: #FFFFFF;   }.menublank { background-color: #6a946a;			 margin-bottom: 0px; }.membersarea { background-color: transparent;			   color: #e4e4e4; 			   font-size: 10px;			   font-verdana;			   padding: 5px;			   border: 1px dotted #396339;			   text-align: left;}.navtop { background-color: #396339;		  text-align: center;		  padding: 5px;		  font-size: 10px;		  font-family: verdana;		  color: #FFFFFF;}}.navtop a { color: #FFFFFF; }#dropmenudiv{position:absolute;background-color: #6a946a;border:1px solid black;border-bottom-width: 0;font:normal 10px Verdana;z-index: 100;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);-moz-opacity: 0.8;width: 155px;}#dropmenudiv a{width: 100%;display: block;text-indent: 3px;border-bottom: 1px solid black;padding: 5px;text-decoration: none;font-weight: bold;}#dropmenudiv a:hover{ /*hover background color*/background-color: #396339;}#toplinks { background-image: url(images/midbar.gif);			font-size: 10px;			color: #FFFFFF;			font-family: verdana;			padding: 5px;			height: 22px;			width: 100%;			float: middle;			z-index: 0;				  }#banner { float: center;		  background-color: transparent;		  width: 100%;		  height: 120px;		  margin: 0px;}#mainnav { float: left;		   width: 155px;		   vertical-align: top;}ul.mainnav{list-style:none; /* this line will remove any kind of bullet from the menu */width: 155px; /* sets the menu width */margin: 0px;padding:0;border: 1px solid #396339;border-bottom: 0px;vertical-align: top;} #menu a{display: block; /* this is a very important property here and it controls the way the menu elements are displayed - like block-level elements */padding: 5px 3px 5px 10px; /* sets the padding properties */font-weight:bold; /* sets the font weight */background-color: #6a946a; /* sets the color of the background */border-top: 1px solid #396339; /* this code sets the line between the menu items */} #menu a:link{color: #efefef; /* sets the font color */text-decoration: none;} #menu a:visited{color: #efefef;text-decoration: none;} #menu a:hover{color: #396339;background:#6a946a url(images/bullet.gif) no-repeat left center; /* when the cursor is over, in the left side of the menu item background it will be display the arrow.gif picture */text-indent:15px; /* this line of code move the text 15 px to the right */} #menu a:active{color: #396339;text-decoration: none;} #menu li { background-color: #6a946a;		   text-align: right;}#content {			float: right;			wrapping: 0px;			width: 50%;}#news { background-color: transparent;		float: middle;		width: 83%;  		text-align: left;}#news td { color: #000000;		   text-align: left; }#infocenter { float: right;		   width: 155px;		   vertical-align: top;}ul.infocenter{list-style:none; /* this line will remove any kind of bullet from the menu */width: 155px; /* sets the menu width */margin: 0px;padding:0;border: 1px solid #396339;border-bottom: 0px;vertical-align: top;}#infocenter ul { background-color: #396339;				 display: inline;				 margin: 0px; }#infocenter li { background-color: #6a946a;				 text-align: center;				 color: #efefef;				 font-size: 10px;				 font-family: verdana;				 list-style: none;				 border: 1px solid #396339;}#infocenter li a { color: #efefef; }#membersarea { float: middle;}

Thanks in advance for any help.P.S. You may notice other problems if viewing in browsers other than Firefox.

[real_illusions]

i would fix your validation errors first...that can usually solve any problems you had.http://jigsaw.w3.org/css-validator/validat...;usermedium=all

[uholyprayer]

I changed the css but nothing changed. I figured out why the banner was overlapping the bar below it but that's it.

[justsomeguy]

The CSS file that is still online still has several parse errors in it. You need to fix those parse errors, each one of those is a problem that could potentially cause the browser to essentially ignore the rest of the stylesheet.

[uholyprayer]

Ok, I changed it but there are still alot of problems. In IE, the information center menu isn't lined up to the right side of the page for some reason. The top image that says Info Center on it is lined up, but all of the other list items aren't.

[justsomeguy]

The <li> elements on the menu have different styles, make sure they all have the same styles.

[uholyprayer]

THey all have the same styles except for the background color.

[justsomeguy]

No they don't:

<li><img src='images/infocenter.gif' alt='Information Center'></li><li style='background-color: #396339;padding: 5px;'>Designer of the Month</li>