Problem with horizontal navigation and IE

[coeyflyer]

I would like to thank all of you for all the great information provided in this forum...

 

I am having a problem with Internet Explorer. I just spent the last few days working on my store, checking it on Safari and Firefox. Today, I noticed that the site is all out of whack in Internet Explorer. The following are the two major problems I can see so far...

 

1. I have centered my store, but in Internet Explorer, it is aligned left. I will have to admit, I have not searched the forum for this yet, and I am sure the answer is there, but I was needing help for my next problem, so I figured to ask this anyway.

 

2. I inserted a horizontal navigation bar into my header, which looks good in Safari and FF. In IE, it is a centered vertical navigation menu. The code for my horizontal navigation from header.php is as follows:

<table>
<tr>
<div id="styletwo">
    <ul>
        <li><a href="<?=tep_href_link('index.php')?>"><span><?php echo HEADER_TITLE_TOP ?></span></a></li>
        <li><a href="http://www.walkoffmatsonline.com/catalog/walk-off-mats-runners-c-21.html"><span><?php echo HEADER_TITLE_WALK_OFF ?></span></a></li>
        <li><a href="http://www.walkoffmatsonline.com/catalog/logo-mats-runners-c-38.html"><span><?php echo HEADER_TITLE_LOGO ?></span></a></li>
        <li><a href="http://www.walkoffmatsonline.com/catalog/antifatigue-mats-c-35.html"><span><?php echo HEADER_TITLE_ANTI_FATIGUE ?></span></a></li>
        <li><a href="<?=tep_href_link('login.php')?>"?><span><? echo HEADER_TITLE_LOGIN ?></span></a></li>
        <li><a href="<?=tep_href_link('create_account.php')?>"?><span><? echo HEADER_TITLE_CREATE_ACCOUNT ?></span></a></li>
        <li><a href="<?=tep_href_link('account.php')?>"?><span><?php echo HEADER_TITLE_MY_ACCOUNT ?></span></a></li>
        <li><a href="<?=tep_href_link('checkout_shipping.php')?>"?><span><?php echo HEADER_TITLE_CHECKOUT ?></span></a></li>
        <li><a href="<?=tep_href_link('logoff.php')?>"?><span><? echo HEADER_TITLE_LOGOFF ?></span></a></li>
    </ul>
</div>
</tr>
</table>

 

Also, my css for "styletwo" is as follows:

#styletwo{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;background:transparent url(images/bgOFF.gif) repeat-x top left;font-family:Verdana, Arial, sans-serif;}
#styletwo ul{margin:0;padding:0;list-style-type:none;width:auto;}
#styletwo ul li{display:block;float:left;margin:0 1px 0 0;}
#styletwo ul li a{display:block;float:left;color:#24618E;text-decoration:none;/*border-right: 1px solid #24618E;*/padding:6px 20px 0 20px;height:24px;}
#styletwo ul li a:hover,#styletwo ul li a.current{color:#fff;background:transparent url(images/bgON.gif) repeat-x top left;}

 

I am by no means a "coder", and as it may be obvious, a bit of a hack. I have been getting by with minimal coding knowledge and I am afraid that this is beyond my skill. I would REALLY appreciate any help or suggestions on what I need to do to straighten out the mess I have created.

 

Thank you in advance,

Chris

[coeyflyer]

Figured it out... my shoddy coding haunts me once again!

[velvetpixel]

This helps!

 

http://browsershots.org/

 

and these

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/