CSS Issue

I am trying to get a news section to work using CSS. It works in Safari and Firefox 3.5 (still need to tweak the layout). But as soon as I put the code into a another site, it stops working in Firefox 3.5 only (well, I've only checked those 3 so far). Any ideas why?

Here's my basic HTML:

<div id="newswrapper"> <div id="newsleftcolumn">


<a class="home" src="" style="text-decoration: none; font-weight: normal;">International students celebrated Thanksgiving at Emerson College<span class="swapout"><img src="BlueSmall.jpg" border="0" height="150" hspace="0" vspace="0" width="300"></span></a><br> <br>  <hr> <br> 

<a class="home" style="text-decoration: none; font-weight: normal;">Ghanaian student Esi Yankah talks about her Africa Mentor Network<span class="swapout"><img src="GreenSmall.jpg" border="0" height="150" hspace="0" vspace="0" width="300"></span></a><br> <br>  <hr> <br>

<a class="home" style="text-decoration: none; font-weight: normal;">Welcome New International Students to Emerson College!<span class="swapout"><img src="RedSmall.jpg" border="0" height="150" hspace="0" vspace="0" width="300"></span></a></div> </div>



<div id="homeimage"><img src="jimsmall.jpg" border="0" height="150" hspace="0" vspace="0" width="300"></div> 

Code (markup):

And the CSS:

#newswrapper { 
 	margin: 0 auto;
 	width: 900px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#666;
	height: 200px;
	}

#newsleftcolumn { 
 	color: #333;
 	background-color: transparent;
 	margin: -7px 0px 0px 0px;
 	padding: 10px;
	height: 200px;
	width: 260px;
 	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}
	
#newsrightcolumn { 
 	float: right;
 	color: #333;
	background-color: transparent;
 	margin: 0px 0px 0px 0px;
 	padding: 10px;
 	display: inline;
	}
	
#homeimage {
	margin-left: 400px;
	margin-top: -202px;
	z-index: 1;
	}	

.home a {
	background-color: transparent;
	color:#666;
	font-weight: normal;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}

.home a:hover{
	background-color: transparent;
	width: 300px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#999;
	text-decoration:none;
	}

.home .swapout{ /*CSS for enlarged image*/
	position: absolute;
	background-color: transparent;
	padding: 5px;
	left: -200px;
	visibility: hidden;
	color: black;
	text-decoration: none;
	}

.home .swapout img{ /*CSS for enlarged image*/
	border-width: 0;
	padding: 2px;
	}

.home:hover .swapout{ /*CSS for enlarged image*/
	visibility: visible;
	top: 0px;
	left: 388px; /*position where enlarged image should offset horizontally */
	z-index: 50;
	}

Code (markup):

Once the whole thing gets framed with this, it breaks:

<div id="editorwrapper" style="clear:both;">
		<div id="imageholder">

Code (markup):

#editorwrapper {
	float: left;
	width: 972px;
	height: 334px;
	color: #333;
	margin: 0px 0px 0px -1px;
	background: #ebf3ec;				/* additional color - lighter color than nav bar */
	}
	
	#imageholder { 
		color: #333;
		margin: 12px 0px 10px 10px;
		width: 900px;
		float: left;
		} 

Code (markup):

Any suggestions on how to fix this?

 

I should add that in Firebug, it doesn't even acknowledge that newswrapper, newsleftcolumn, newsrightcolumn, and home are there.

 

Nevermind - changed the order of styles in the style sheet and problem solved!

 

good job...way to fix it yourself..

 

Nice work. I had a similar issue yesterday. *facepalm*