I am developing a new app to create the homepage similar to IE9 Tweakers Homepage maker and need some help.

My code all works fine in Internet Explorer but I opened it in Chrome today and the Divs are not aligned the same as they would be in IE. I know this is an issue with the Text Align property (pretty sure anyways). If there is anyone that could look at the following code and tell me what I am doing that should be done different for cross browser compatible, I would really appreciate it.

<html><head><style type="text/css">
body{
background-image:url('http://www.deviantart.com/download/180429757/dreaming_by_leewhittington-d2zf8hp.jpg');
background-repeat:repeat-x;
font-family:Arial;
}a:link{color: #000000;text-decoration: none;}a:visited {text-decoration: none;color: #000000;}a:hover {text-decoration: none;color: #000000;}a:active {text-decoration: none;color: #000000;}
</style>
<title>Favorite Places</title>
</head>
<body>
<center>
<br><br><br>
<div style="background-color:transparent; height:400px; width:805px;overflow:hidden;">
</center>
<table border="0">
<tr>
<td>
<a href="http://www.thewindowsclub.com"target="_blank">
<div style="background-image:url(Underlay.png); height:125px; width:125px; margin-left: 4px; margin-top: 4px;overflow:hidden;cursor: pointer;">
<div style="height:106;width:106;margin-left: 5px; margin-top: 5px;overflow:hidden;cursor: pointer;top:2;">
<div style="height:32px; width:32px;margin-left: 5px; margin-top: 5px;">
<img src=http://www.thewindowsclub.com/favicon.ico style="position: relative; left: 1; top: 1;"/>
</div>
<p align="center">The Windows Club</p>
</div></div>
</td></tr></table>
</div>

<br>
<center>
<!-- Bing -->
<meta name="Search.WLSearchBox" content="1.1, en-US" />
<div id="WLSearchBoxDiv">
<table cellpadding="0" cellspacing="0" style="width:322px; height:42px;"><tr id="WLSearchBoxPlaceholder"><td style="width:100%; border:solid 1px #cccccc; border-right-style:none; padding-left:10px; padding-right:10px; vertical-align:middle;"><input id="WLSearchBoxInput" type="text" value="&#x4c;&#x6f;&#x61;&#x64;&#x69;&#x6e;&#x67;& #x2e;&#x2e;&#x2e;" disabled="disabled" style="background-image:url(http://www.bing.com/siteowner/s/site...ground_k.png); background-position:right; background-repeat:no-repeat; font-family:Arial; font-size:14px; color:#000000; width:100%; border:none 0 transparent;"/></td><td style="border:solid 1px #cccccc; border-left-style:none; padding-left:0px; padding-right:3px;"><input id="WLSearchBoxButton" type="image" src="http://www.bing.com/siteowner/s/siteowner/searchbutton_normal_k.gif" style="border:none 0 transparent; height:24px; width:24px; vertical-align:top;"/></td></tr></table>
<script type="text/javascript" charset="utf-10">
var WLSearchBoxConfiguration=
{
"global":{
"serverDNS":"www.bing.com",
"market":"en-US"
},
"appearance":{
"autoHideTopControl":false,
"width":600,
"height":400,
"theme":"Blue"
},
"scopes":[
{
"type":"web",
"caption":"&#x57;&#x65;&#x62;",
"searchParam":""
}
]
}
</script>
<script type="text/javascript" charset="utf-10" src="http://www.bing.com/bootstrap.js?market=en-US&ServId=SearchBox&ServId=SearchBoxWeb&Callback=W LSearchBoxScriptReady"></script>
</div>
<!-- Bing --></center>
<br><br><center><div id="footer"><font color="blue"><a href="http://www.thewindowsclub.com/" title="Visit The Windows Club">The Windows Club</a>
</font></div></center></body></html>
I know, the <br> tags I shouldn't use but for the life of me I couldn't get the table aligned the way I wanted it

The major issue I see is the alignment, In IE this code works fine, in Chrome (haven't tested others yet) everything is situated to the bottom left of page and scrolled down paste viewable screen so user has to scroll.