Problem with nav in IE 7

programming web dev
1

Hi,

I have a menu on a website that is not working very well in Internet Explorer 7. See below information. Any suggestions would be much appreciated.

Thanks

Website: www.nicjonesdesign-wip.com/aquaclear/index.php

Link to screen shot of how it looks in IE7:

http://www.nicjonesdesign-wip.com/screenshot.png

[COLOR=#000080]<div id=[COLOR=#0000FF]“menu_container”[/COLOR]>[/COLOR] [COLOR=#000080]
<div id=[COLOR=#0000FF]“menu”[/COLOR]>[/COLOR] [COLOR=#000080]
<ul>[/COLOR] [COLOR=#000080]
<li id=[COLOR=#0000FF]“nav_home”[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]“index.php”[/COLOR]>[/COLOR]Home[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR] [COLOR=#000080]
<li id=[COLOR=#0000FF]“nav_contracting”[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]“contracting.php”[/COLOR]>[/COLOR]Contracting[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR] [COLOR=#000080]<li id=[COLOR=#0000FF]“nav_sales”[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]“sales.php”[/COLOR]>[/COLOR]Truxor Sales[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
[COLOR=#000080]<li id=[COLOR=#0000FF]“nav_clients”[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]“clients.php”[/COLOR]>[/COLOR]Clients[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
[COLOR=#000080]<li id=[COLOR=#0000FF]“nav_latest_news”[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]“latest_news.php”[/COLOR]>[/COLOR]Latest News[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
[COLOR=#000080]<li id=[COLOR=#0000FF]“nav_contact”[/COLOR]>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]“contact.php”[/COLOR]>[/COLOR]Contact Us[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
[COLOR=#000080]</ul>[/COLOR] [COLOR=#000080]
</div>[/COLOR]
[COLOR=#000080]</div>[/COLOR]

#menu_container { background-image: url("…/images/bg_menu.gif"); height: 38px; width: 100%; }

#menu { border-left: 1px solid #004177; height: 32px; margin: 0 auto; width: 984px; }

#menu ul { list-style: none outside none; margin: 0; padding: 0; }

#menu ul li a { border-right: 1px solid #004177; color: #FFFFFF; float: left; height: 22px; padding: 10px 0 0; text-align: center; text-decoration: none; width: 120px; }

#menu ul li a:hover { background-color: #004177; background-image: url("…/images/bg_menu_arrow.png"); background-position: center 0; background-repeat: no-repeat; }