IE ignoring CSS files

HI folks,

When I open up a local html file in IE10, it just ignores the CSS files. When I open up the same local file in Chrome, it renders correctly.

Any ideas what could be causing this ??

I have added the code below.

Thanks,

J

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/text_main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Angela Campbell - - Photography - Home Page</title>
<!-- InstanceEndEditable -->


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="DESCRIPTION" CONTENT="Angela Campbell - Photography">
<META NAME="KEYWORDS" CONTENT="Fraserburgh, Aberdeen, Inverallochy, Cairnbulg, Gardenstown, St Combs, Crimond, Peterhead, Strichen,  Rosehearty, Aberdeenshire, Weddings, engagement, marriage, church, wedding services, honeymoon, camera, lens, Nikon, capture, light, sepia, colour, color ">
<META NAME="AUTHOR" CONTENT="Nortech Technology Solutions">


<!-- load css files -->
<link href="css/text.css" rel="stylesheet" type="text/css">
<link href="css/tables.css" rel="stylesheet" type="text/css">
<link href="css/tds.css" rel="stylesheet" type="text/css">


<!-- load javascript files -->
<script language="javascript" src="js/slideshow.js" type="text/javascript"></script>
<script language="javascript" SRC="js/loadPortfolio.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--
var message="Right-mouse click has been disabled.";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);

return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);

return false;
}
}
}
if (document.layers) {;
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</script>

<style type="text/css">
<!--
.style1 {color: #333333}
-->
</style>


</head>

<body onload="runSlideShow();">

<div align = "center">
<!-- spacer table -->
<table>
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>




<table class = "main" align="center">
	<!-- top row includes logo and menus -->
	<tr>
		<td class = "mainLeft"><img src="images/angelalogo.jpg" alt ="logo"/>
	
	  </td>
		
		<!-- menu -->
		<td class = "mainRight">
       <table width = "100%">
          <!-- top row -->
          <tr>
            <td class = "menuItem" onMouseOver="showHomeMenu();"><a href = "index.html" class = "menuoff" id = "homelink1">HOME</a></td>
            <td class = "menuItem" id = "portfoliocell1" onMouseOver="showPortfolioMenu();" ><a href = "#" id = "portfoliolink1" class = "menuoff">PORTFOLIO</a></td>
            <td class = "menuItem" id = "servicescell1" onMouseOver="showServicesMenu();"><a href = "#" class = "menuoff" id = "serviceslink1">SERVICES</a></td>
            <td class = "menuItem" onMouseOver="showOrdersMenu();"><a href = "order.html"  class = "menuoff" id = "orderslink1">ORDER</a></td>
            <td class = "menuItem" onMouseOver="showAboutMeMenu();"><a href = "aboutme.html" class = "menuoff" id = "aboutmelink1">ANGELA</a></td>
            <td class = "menuItem" onMouseOver="showContactMenu();"><a href = "contact.html" class = "menuoff" id = "contactlink1">CONTACT</a></td>
          </tr>
          <!-- 2nd row -->
          <tr>
            <td class = "menuItem"><a href = "#.html" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem" id = "portfoliocell2"><a href = "po_weddings.html" class = "menuoff style1" id = "portfoliolink2">&nbsp;</a></td>
            <td class = "menuItem" id = "servicescell2"><a href = "se_weddings.html" id = "serviceslink2" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
          </tr>
          <!-- 3rd row -->
          <tr>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem" id = "portfoliocell3"><a href = "po_portraits.html" id = "portfoliolink3" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem" id = "servicescell3"><a href = "se_portraits.html" id = "serviceslink3" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
          </tr>
          <!-- 4th row -->
          <tr>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem" id = "portfoliocell4"><a href = "po_family.html" id = "portfoliolink4" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem" id = "servicescell4"><a href = "../se_family.html"id = "serviceslink4" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
          </tr>
          <!-- 5th row -->
          <tr>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem" id = "portfoliocell5"><a href = "po_graduations.html" id = "portfoliolink5" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem" id = "servicescell5"> <a href = "se_graduations.html" id = "serviceslink5" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
          </tr>
		   <!-- 6th row -->
          <tr>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem" id = "portfoliocell6"><a href = "po_graduations.html" id = "portfoliolink6" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem" id = "servicescell6"> <a href = "se_graduations.html" id = "serviceslink6" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
            <td class = "menuItem"><a href = "#" class = "menuoff">&nbsp;</a></td>
          </tr>
        </table>
		</td>
	</tr>
	
	<tr>
		<td class = "info">
		<!-- InstanceBeginEditable name="EditRegion3" --><span class = "bodytext">Angela offers the Complete Package Service from taking the photos to having them framed with a wide variety of Multi Posters etc. all at very Competitive prices.<br /><br />
		So why don;t you give Angela a call, and book to have a Portrait Session or your Wedding Consultation in a relaxed family atmosphere by herself.<br /><br />I'm sure you won't be disappointed!
		</span><!-- InstanceEndEditable -->
	  </td>
	  <td class = "mainPhoto"><!-- InstanceBeginEditable name="EditRegion4" --><img id = "slideshow" class = "slideshow" src="images/slideshow/slide0.jpg" /> <!-- InstanceEndEditable --></td>
	</tr>
	
</table>
<table width = "800px" border = "0">
	<tr>
		<td class = "footerleft"><span class = "footertext">Developed by <a href = "http://www.nor-tech.co.uk" ><span class = "footerlinktext"> Nortech</span></a> Technology Solutions.</span></td>
		<td class = "footerright"><span class = "footertext">&copy; 2007 Angela Campbell. All images are Copyright</span></td>
	</tr>
</table>
</div>
</body>
<!-- InstanceEnd --></html>

No ideas, but see if this helps: