CSS - Box Me! I'm Stumped

I have a problem that I cannot seem to resolve no matter how hard I try.

- Click Here -

As you can see, this page renders well in firefox but breaks horribly in IE. Try mousing over the links in the top right corner of the page and the layout really breaks!

If anyone has some free time could you take a look at this page and see if any solution springs to mind?

CSS: Code:

body{
 margin:0;
 font-size:small;
 text-align:center;
 background-color:#c60;
 border-top:3px solid #666;
 font:Arial, Helvetica, sans-serif;
 background-image:url(../images/background.png);
 background-attachment:fixed;
 background-position:bottom left;
 background-repeat:repeat-x;

#content{
 margin:2% 0% 2% 17.2%;
 background-color:#9cf;
 border:solid #0af;
 border-width:2px 1px;
 background-image:url(../images/bits.gif);
 background-position:top right;
 background-repeat:repeat-y; 
}

#content h2{
 color:#000;
 background-color:#fdb;
 border:1px solid #c60;
 padding:2px;
 width:100px;
 margin:5px auto -12px auto;
 font-weight:bold;
 font-size:12px;
 text-align:center;
 position:relative;
}

#table_wrapper{margin:5px;}

#main_table{
 background-color:#fff;
 border:1px solid #999;
 border-width:2px 1px;
 text-align:center;
 margin:0 auto;
 width:100%
}

#main_table thead tr th{
 height:20px;
}

#main_table tbody tr td {
 font-family:"lucida grande", verdana, sans-serif;
 font-size:8pt;
 padding:3px 8px;
 border-right:1px solid #d9d9d9;
}

#main_table tbody tr.selected td {
 background-color:#fdb;
 border-left: 1px solid #d9d9d9;
}

#wrapper{
 border-style:solid;
 border-color:#666;
 border-width:5px 1px;
 width:94%;
 margin:25px auto 50px auto;
 text-align:left;
 padding:1%;
 background-color:#fff;
}

#header{
 height:60px; 
 padding-top:8px;
 border-bottom:3px solid #0af; 
 background-image:url(../images/banner.gif);
 background-position:bottom left;
 background-repeat:no-repeat; 
}

#nav{
 height:60px;
 float:right;
 font-size:11px;
 background-image:url(../images/notebook.gif);
 background-position:right;
 background-repeat:no-repeat;
}

#nav ul, #nav li{
 display:inline;
 margin:0 25px 0 0;
}

#nav a{color:#000}
#nav a:visited{color:#666;}
#nav a:hover{color:#c60; border-bottom:1px dashed #c60;} 

#leftcol{
 float:left;
 width:16.5%;
 margin:2% 0;
 border:solid #0af;
 border-width:2px 1px;
 background-color:#9cf;
 background-image:url(../images/bits.gif);
 background-position:top right;
 background-repeat:repeat-y; 
}

#leftcol h2{
 color:#000;
 background-color:#fdb;
 border:1px solid #c60;
 width:50%;
 margin:5px auto 0 auto;
 font-weight:bold;
 font-size:12px;
 text-align:center;
 padding:2px;
 width:30px;
 margin:5px auto -12px auto;
 position:relative;
}

#info{
 border:solid #999;
 border-width:2px 1px;
 background-color:#fff;
 margin:5px;
 padding:0;
}

#info p{margin:10px 5px 5px 5px;}

#footer{
 color:#999;
 clear:both;
 width:100%;
 font-size:11px;
 text-align:center;
 border-top:3px solid #0af;

}

I have a container, header,left-side vertical navbar, content, and a footer. Everything works fine except when the content div is very wide. When this happens the header and footer are only as wide as the screen and not as wide as the content div. Here's my CSS.

Code:

#container {
	width:100%;
	background: #fffce0 url(images/narrowtrick.gif) repeat-y;/*this colour will be left column colour */
	margin:0px;
	padding:0px;
	text-align:left;
	}


#header {
	height:145px;
	width:100%;
	background-image: url(images/topbackground2.jpg);
	text-align:center;
	margin:0px;
	padding:0px;}
#navbar{
	float:left;
	width:122px;
	margin:0px;
	padding:0px;}
	
#content {
	
	background:#fffce0;/* background colour of right column */
	margin-left:122px;/*this is the space for the left column */
	padding:0px;
	
}

#footer {
	clear: both;
	border-top:1px solid red;
	border-bottom:1px solid red;
background-image: url(images/gradientsmaller2.gif);
          font: 10pt;
          background-color: #ccffcc;
          width: 100%; 
	text-align: right;
	margin:0px;
	padding:0px;
}

I can't figure this one out!
Code:

<div id=container>
   <div id=header>
   </div>
   <div id=navbar>
   </div>
   <div id=content>
   </div>
   <div id=footer>
   </div>
</div>

the content div is dynamic so it could be very wide.

Hello everyone, I have a fairly basic CSS question to ask, but since I'm new to CSS, I'm a bit stumped. If you check out my Blog (at http://goblinsatemyblog.com), on the sidebar you'll see that the menu hovers are colored green. However, on a few of the widgets displayed, rolling over the menu truncates the link down a few pixels, which doesn't look that great. I applied "display: block" tags and a background color to the widgets to create the rollover, but some still work properly and others don't. What do I need to do to keep the rollover links from acting up? Here's the code pertaining to the two CSS files in the theme.

Code:

.custom li.widget li a:hover, .custom li.linkcat li a:hover { display: block; padding: 0 0 0 0.3em; color: #fff; background: #009933; }

Code:

#rss { width: 20em; height: 190px; margin: 0 0 1.0em 0; background: url('images/rss.png') 50% 0 no-repeat; text-align: center; }

	#rss a { display: block; width: 202px; height: 184px; margin: 0 auto; }

ul.sidebar_list { list-style: none; }

	ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 16.6667em; margin: 0 0 2.8em 0; font-size: 1.2em; line-height: 1.6667em; float: left; border-bottom: 2px solid #009933; }

		li.widget p { margin: 0 0 1.66667em 0; }
		
		li.widget ul, li.linkcat ul { list-style: none; margin: 0 0 0.8333em 0; }
		
			 li.widget li, li.linkcat li { padding: 0 1.0em 0 1.16667em; background: url('images/bullet.gif') 0 0.4167em no-repeat; }
					
				li.widget li a:hover, li.linkcat li a:hover { color: #575757; }

I picked out the part of the CSS files that I think are relevant, but I can past the entire code if requested. Thank you in advance!

It's my fault for not checking IE after every change but somehow a div stopped stretching and I can't find the problem. Works great in FF but not in IE 6 or 7.

Here's the problem page

It just doesn't make sense to me. Am I missing a hack maybe?

I'm trying to create a (I think) simple page for an art gallery's artists. You can visit artizansc.com/dev/artists/artists.htm. I have created classes in my css for the artists' pictures (biopic), names (H2) and bio (biotext). I have also created a class called biowrapper to wrap each person's info.

As you can see, the pictures are not lining up. It seems this should be simple and frankly, I'm feeling stupid. I'm new with CSS, but this shouldn't be rocket science!

Can anyone please help me?