Problem with my coding

Hey, there's a problem with my coding on my site. It works fine on Firefox, but on IE the right content box goes below the left menu, which it obviously shouldn't. The person that coded it cannot figure out the problem, I was wondering if someone here could? I'd really appreciate it The site is WWE Divas.

Here's the CSS.

/* CSS Document */

body {
	background:#101010;
	font-family:Trebuchet MS;
	font-size:11px;
	color:#767676;
	word-spacing:1px;
}

#wrapper {
	width:778px;
	margin:0 auto;
}



#leftColumn {
	width:222px;
	float:left;
	margin:0 4px 0 0;
}

#leftColumn .table, #rightColumn .table {
	border-left:5px solid #000000;
	border-right:5px solid #000000;
	border-bottom:5px solid #000000;
	background:#070707;
	margin:0 0 15px 0;
} 
	#leftColumn .table h2, #rightColumn .table h3 {
		text-transform:uppercase;
		color:#747474;
		font-size:14px;
		background:url(images/maintitle.gif) #000000 no-repeat;
		padding:8px 0 6px 32px;
		font-family:Arial, Helvetica, sans-serif;
		border-bottom:1px solid #191919;
	}
		#leftColumn .table p {
			padding:12px;
		}	
		#rightColumn .table p {
			padding:12px;
		}
		#leftColumn .table p {
			line-height:15px;
		}
			#leftColumn .table span {
				color:#a6a6a6;
			}
	
#navigation {
	padding:10px;
}	
	
#navigation li {
	font-size:11px;
	font-family:Trebuchet MS;
	list-style:none;
	margin:8px 3px 8px 2px;
}
	#navigation li a {
		font-weight: bold; color:#a6a6a6;
	}
		#navigation li a:hover {
			font-weight: bold; color:#e8e8e8;
		}
	
#rightColumn {
	float:left;
	width:552px;
}	

* {
	margin:0;
	padding:0;
}

a {
	font-weight: bold; color:#a6a6a6;
}
	a:hover {
		font-weight:bold; color:#e8e8e8;
	}

#rightColumn .table span {
				color: #b2b2b2;
			}

.date {
	background:#000000;
	border-top:1px solid #191919;
	height:41px;
}

p.txt {
	margin:3px 0 0 0;
}

#footer {
	background:#000000;
	text-align:center;
	clear:both;
	width:100%;
	float:left;
	margin-top:10px;
}
	#footer p {
		padding:10px 0 10px 0;
	}

.clear {
	clear:both;
}


img {
	border: 1px solid #191919;
}

img:hover {
	border: 1px solid #a90000;
	cursor: pointer;
}

.nohov img {
border: 0px; padding-right: 5px; padding-left:20px;
}

.nohov img:hover {
border: 0px;
}

#rightColumn .table p img {
			vertical-align: middle
		}

Code (markup):

 

Have your coder start by fixing his 50 XHTML validation errors and one CSS validation error (it should be clear: both; not clear: all; ).

 

i love errors... why get rid?

 

Yeah, I don't think clear: all; work for FF anymore either...

 

clear: all; never existed in the first place. It was either clear to the left, clear to the right, or clear them both.

 

You are still getting 29 errors in the validation - because tags and attrributes are in uppercase.

The meta tag code:

<META NAME="description" CONTENT="ECW and WWE Divas pictures, videos, biographies and much more including Ashley Massaro, Candice Michelle, Trish Stratus, Lita, Kelly Kelly and other past and present ECW and WWE Divas.">

Code (markup):

Should be:

<meta name="description" CONTENT="ECW and WWE Divas pictures, videos, biographies and much more including Ashley Massaro, Candice Michelle, Trish Stratus, Lita, Kelly Kelly and other past and present ECW and WWE Divas."/>

Code (markup):

For each image you have, put

alt="Image Description"

Code (markup):

in their somewhere.

Each image must be closed like "/>", as do meta's, linebreaks and horizontal rules.

So:

 <img src="images/candice45gm6.png" width="200" height="250">

Code (markup):

Should effectively be:

 <img src="images/candice45gm6.png" width="200" height="250" />

Code (markup):

Just doing that should fix most of your coding errors.

I don't think your coder is the best....

clear:all is what is probably causing the problem though.

 

And those attributes should also be in lower case if you're using an XHTML DOCTYPE as well.

 

Did I not say that?

 

I was merely pointing out that your CONTENT attribute was still in capital letters. Probably just an oversight - even I do it once in a whie.

 

Bah, thanks.