X-Cart forums - CSS question - Different look in IE than FF

Can someone help me out here...

When viewing my site http://www.systemskins.com/sscart/home.php It looks great in FF. But when you view it in IE the hover links in the controller are shifted.

My code for head.tpl

Code:

{* $Id: head.tpl,v 1.58.2.1 2007/09/03 06:15:21 max Exp $ *}

<table class="HeaderBG" cellpadding="0" cellspacing="0" width="970px" height="261">

<tr><td class="HeadRightHome" height="15px" width="100%" colspan="3"><a href="{$http_location}/">Home</a></td>

</tr>

<tr>

<td class="HeadLeftBox" width="50%"><a href="{$http_location}/"><img src="{$ImagesDir}/header_logo.gif" width="300" height="120" alt="System Skins" /></a></td>

    <td width="35%" class="HeadRightAccount"><a href="../register.php">My<br />Account</td>

    <td width="15%" class="HeadRightCart"><a href="../cart.php">My<br />Cart</a></td>

</tr>

</table>

<table class="HeaderBGbottom" cellpadding="0" cellspacing="0" width="100%" height="196">

<form action="{$xcart_web_dir}/include/login.php" method="post" name="toploginform">

<input type="hidden" name="mode" value="logout" />

<input type="hidden" name="redirect" value="{$redirect|escape}" />    

<tr><td height="100%" width="33%"><img src="{$ImagesDir}/spacer.gif" width="1" height="1"/></td>

<td height="100%" width="34%"><img src="{$ImagesDir}/spacer.gif" width="1" height="1"/></td>

<td height="100%" align="right" width="33%" valign="bottom" nowrap="nowrap" class="FLCAuthBox">

<img src="{$ImagesDir}/spacer.gif" width="1" height="1"/>

{if $login ne ""}<b>{$login} </b>{$lng.txt_logged_in}

{if $js_enabled}

{include file="buttons/button.tpl" button_title=$lng.lbl_logoff href="javascript: document.toploginform.submit();" js_to_href="Y"}

{else}

{include file="buttons/logout_menu.tpl"}

{/if}

    </td>

{/if}

</tr>

</table>

</form>

I'm trying to make the hover links in the controller white with a red highlight on mouseover but if I change that then the titles of my products change to white too. I've tried to separate this but cant seam to do so. I thought that by having this CSS code would work for the hover buttons but it does't, it takes on the A:link and A:visited style. I thought that by indicating <td class="HeadRightHome" >it would effect the <a href=""> tag but its not changing the link properties. It changed the center and padding but not the link properties.

Code:

A:link {

    COLOR: #000000;

    TEXT-DECORATION: none;

}

A:visited {

    COLOR: #000000;

    TEXT-DECORATION: none;

}

A:hover {

    COLOR: #FF0000;

    TEXT-DECORATION: underline;

}

.HeadRightHome {

    TEXT-ALIGN: right;

    TEXT-DECORATION: none;

    COLOR: #FFFFFF;

    PADDING-RIGHT: 249px;

    PADDING-TOP: 25px;

}

Also, When a customer logs in it says "username" is logged in! There is also a "Log out" with a button next to it but it places this underneath the "username" is logged in! I want this all on one line. I can't find where/why it's doing this. How do I make this all on one line?

Thanks,

Doug