CSS and Table border problem

[Ecniv]

Hi

I have a problem with some css and a table.

I tried to do a layout using only CSS, but it didn't look right, so I re-did with a table.

However, only IE is displaying the borders the way I want. Firefox extends the bottom line into cell (merged) that it shouldn't to the side, and Chrome extends a line down the side...



Now it could be that it is a browser problem rending, if so... sigh. But if its me (more likely) can some one spot it and let me know what I did wrong?


Html code showing the two examples of the types of table...

<table class="MSBoxOuter">

<tr><td colspan="3" class="MSTitle">A title</td></tr>
<tr><td class="botonly">Month</td><td class="botonly">Value</td><td class="botonly">Difference</td></tr>

<tr class="MSTopSpace"><td>Mar-14</td><td>Value</td><td class="itsverybad botonly" rowspan="2">Value<img src="./pics/upr.jpg" width="16" height="16" alt="upr" /></td></tr>
<tr class="MSMidSpace"><td class="toponly">Apr-14</td><td class="topright">Value</td></tr>
<tr class="MSMidSpace"><td class="botonly">YTD Spend</td><td class="botright">Value</td><td rowspan="2" class="MSBotSpace itsgood">Value<img src="./pics/downg.jpg" width="16" height="16" alt="downg" /></td></tr>
<tr class="MSBotSpace"><td>Stuff</td><td>Value</td></tr>
</table>




<table class="MSBoxOuter">

<tr><td colspan="3" class="MSTitle">A Title</td></tr>
<tr><td class="botonly">Month</td><td class="botonly">Value</td><td class="botonly">Difference</td></tr>

<tr class="MSTopSpace"><td>Mar-14</td><td>Value</td><td class="itsgood botonly" rowspan="2">Value<img src="./pics/upg.jpg" width="16" height="16" alt="upg" /></td></tr>
<tr class="MSMidSpace"><td class="topbot" rowspan="2">Apr-14</td><td class="topbotright" rowspan="2">Value</td></tr>
<tr class="MSMidSpace"><td rowspan="2" class="MSBotSpace itsgood">Value<img src="./pics/upg.jpg" width="16" height="16" alt="upg" /></td></tr>
<tr class="MSBotSpace"><td>Target</td><td>Value</td></tr>

</table>

All the css.. incase someone can spot something affecting something else...

/* Montly Summary */




.MSDisplay {
	height: 400px;
	overflow: auto;
	border-width: 0px;
	border-style: solid;
	border-color: #0000ff;
	padding: 4px;
}


.MSRow {
	background-color: #f2f2f2;
	border-width: 2px;
	border-style: solid;
	border-color: #000000;
	border-radius: 4px; 
	box-shadow: 8px 8px 4px #888888;
	padding: 4px;
	float: left;
	margin: 8px 0 8px 0;
}

.MSBoxOuter {
	width: 309px;
	border-width: 2px;
	border-style: solid;
	border-color: #000000;
	margin: 2px 8px;
	padding: 4px;
	border-radius: 4px; 
	float: left;
}

.MSTitle {	
	background-color: #007700;
	color: #ffffff;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	border-width: 0px;
	border-style: solid;
	border-color: #00ffff;	
}

.MSTitleMini {
	background-color: #f2f2f2;
	height: 24px;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
	overflow: hidden;
}

.MSTitleMini td {
	width: 100px;
}

.MSTopSpace {
	height: 24px;
	background-color: #e2ffe2;
	vertical-align: top;
}

.MSBotSpace {
	height: 24px;
	background-color: #d8e4bc;
}


.MSMidSpace {
	font-weight: bold;
	width: 200px;
	height: 24px;
	background-color: #ebf1de;
	vertical-align: middle;
	border-width: 1px 1px 1px 0px;
}


.itsgood {
	color: #00cc00;
}

.itsbad {
	color: #886e20;
}

.itsverybad {
	color: #cc0000;
}


table {
	width: 309px;
	border: 1px solid #000000;
	border-collapse:collapse;
}

table tr {
	height: 24px;
}


table td {
	padding:0;
	margin:0;
	width: 96px;
	vertical-align: middle;
	border: solid 0px #000000;
}

table td img {
	margin: 0 2px 0 2px;
}

.topbot {
	border-style: solid;
	border-width: 1px 0 1px 0;
	border-color: #000000;
}

.topbotright {
	border-style: solid;
	border-width: 1px 1px 1px 0;
	border-color: #000000;
}

.toponly {
	border-style: solid;
	border-width: 1px 0 0 0;
	border-color: #000000;
}

.topright {
	border-style: solid;
	border-width: 1px 1px 0 0;
	border-color: #000000;
}

.botright {
	border-style: solid;
	border-width: 0px 1px 1px 0;
	border-color: #000000;
}

.botonly {
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #000000;
}