Hi,
You have a missing doctype which you must put back in or all versions of IE will be in quirks mode.
The links to the IE css files don’t seem to be going anywhere either 
These ones:
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css /> <![endif]-->
You also have not placed the sticky footer code for IE8 into the html as instructed (see the css faq at the top of the forum for an updated version of that routine you are using (which was borrowed from me anyway :)))
There is no need for your twitter div as it can all be done in one element.
e.g.
#social {
background: #f0f2eb url(http://bloggerfusion.com/images/socialbg.png) no-repeat;
width: 265px;
height: 31px;
float: right;
color: #f0f2eb;
padding:5px 0 0 15px;
margin:0;
}
#social img {
margin: 0 8px 0 0;
vertical-align:middle
}
#social a {
color: #f0f2eb;
text-decoration: none;
font-size: 81.3%;
}
#social a:hover {
color: #e5f798;
}
#social a b{color:white}
#social a:hover b{color:red}
<div id="main">
[B] <p id="social"> <a href="http://twitter.com/bloggerfusion" title="@bloggerfusion"><img src="http://bloggerfusion.com//images/twitter.png"><b>@</b>bloggerfusion</a></p>[/B]
</div>
I’ve wrapped a b element around the @ symbol so that you can color it as you like. You can either change it on hover or keep it the same color.
Full code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" >
<meta name="#" keywords="#">
<meta name="#" description="#">
<title>Blogger Fusion</title>
<link rel="stylesheet" href="style.css" type="text/css" >
<style type="text/css">
/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* End Reset */
html, body {
height: 100%;
background: #f0f2eb;
font-family: arial, helvetica, serif;
font-size: 100%;
}
#wrap {
min-height: 100%;
width:940px;
margin: 0 auto;
}
* html #wrap {
height:100%
}
#main {
overflow:auto;
padding-bottom: 45px; /* must be same height as the footer */
}
#social {
background: #f0f2eb url(http://bloggerfusion.com/images/socialbg.png) no-repeat;
width: 265px;
height: 31px;
float: right;
color: #f0f2eb;
padding:5px 0 0 15px;
}
#social img {
margin: 0 8px 0 0;
vertical-align:middle
}
#social a {
color: #f0f2eb;
text-decoration: none;
font-size: 81.3%;
}
#social a:hover {
color: #e5f798;
}
#social a b{color:white}
#social a:hover b{color:red}
/* Footer CSS */
#footer {
position: relative;
margin-top: -45px; /* negative value of footer height */
height: 45px;
clear:both;
background: #333;
}
#footerText {
width:940px;
font-size: 81.3%;
margin: 0 auto;
padding: 15px 0 0 0;
}
#footerText a {
color: #f0f2eb;
text-decoration: none;
}
#footerText a:hover {
color: #e5f798;
}
#footerLinks li a {
margin: 0 20px 0 0;
display:inline;
float: left;
text-align:left;
}
#footerCopy {
float: right;
color: #b0aa98;
}
/* Opera Fix */
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css /> <![endif]-->
</head>
<body id="index">
<div id="wrap">
<div id="main">
<p id="social"> <a href="http://twitter.com/bloggerfusion" title="@bloggerfusion"><img src="http://bloggerfusion.com//images/twitter.png"><b>@</b>bloggerfusion</a></p>
</div>
</div>
<div id="footer">
<div id="footerText">
<div id="footerLinks">
<ul>
<li> <a href="#">All Jobs</a> </li>
<li> <a href="#">Post A Job</a> </li>
<li> <a href="#">Contact Us</a> </li>
</ul>
</div>
<div id="footerCopy"> © Blogger Fusion | Design by <a href="http://www.andycrofford.com" title="AndyCrofford.com">Andy Crofford</a> </div>
</div>
</div>
</body>
</html>
Hope that helps
