Horizontal Navigation Browser Problem! Please Help.

Posted: Sun, 2008-10-12 20:50

I am having a problem with IE browsers. here is the domain i am having problem on www.artemweb.com

I am having a problem with navigation bar for some reason it dose not come up in IE6 and in IE7 it comes up on the right side.
In mazila firefox, opera, safari, it works fine. here is the css

@charset "UTF-8";

#mainMenu ul {
padding: 0; margin: 0; /* add this */
padding-left: 15px;
} 

ul#mainMenu{
	position:absolute;
	margin: 0px;
	padding:0px;
	width:100%;
	z-index:1000;
	background:transparent;
	top:100px;
	background-image:url(/includes/templates/images/MENU.png);
	background-position:center;
	font-family: Arial, Helvetica, sans-serif;
}
ul#mainMenu li{
	position:relative;
	list-style:none;
	float:left;
	display:block;
	height:30px;
	background-image:url(/includes/templates/images/MENU.png);
	background-repeat:no-repeat;
}
ul#mainMenu li a span{
	display:none;
}
ul#mainMenu li a{ /* An overflow fix is placed for IE 6 on the IE fix file*/
	display:block;
	height:30px;
}
/* Menu Links - Regular and Over States*/
li#link_home{
	width:125px;
	background-position:0 0;
}
li#link_home:hover{
	background-position:0 -30px;
}

li#link_software{
	width:125px;
	background-position:-125px 0;
}
li#link_software:hover{
	background-position:-125px -30px;
}

li#link_requirements{
	width:125px;
	background-position:-250px 0;
}
li#link_requirements:hover{
	background-position:-250px -30px;
}

li#link_support{
	width:125px;
	background-position:-375px 0;
}
li#link_support:hover{
	background-position:-375px -30px;
}

li#link_services{
	width:125px;
	background-position:-500px 0;
}
li#link_services:hover{
	background-position:-500px -30px;
}

li#link_clients{
	width:125px;
	background-position:-625px 0;
}
li#link_clients:hover{
	background-position:-625px -30px;
}

li#link_usefull{
	width:125px;
	background-position:-750px 0;
}
li#link_usefull:hover{
	background-position:-750px -30px;
}

li#link_contact{
	width:125px;
	background-position:-875px 0;
}
li#link_contact:hover{
	background-position:-875px -30px;
}

/* Sub Menu Properties*/
ul#mainMenu ul{
	display:none;
	position:absolute;
	margin:0 0 0 2px;
	padding:0;
}
ul#mainMenu ul li{
	position:relative;
	margin:0;
	padding:0;
	height:auto;
	background:#ffffff;
	background-image:none;
	list-style:none;
	float:left; /*float left and clear left hack for piece of *beep* IE */
	clear:left;
	border:1px solid #9f9fea;
	border-width:0 1px 1px 1px;
}
ul#mainMenu ul li a{
	background:#ffffff;
	height:auto;
	padding:8px;
	text-decoration:none;
	color:#41419f;
	display:block;
	font-size:10px;
	font-weight:bold;
}
ul#mainMenu ul li a:hover{
	background:#ccccff;
}
#sublink1 li 
{
width:180px;
float:left;
text-align:left}
#sublink2 li 
{
width:150px;
text-align:left}
#sublink3 li 
{
width:150px;
text-align:left}



/*roll over*/
ul#mainMenu li.subMenu:hover ul{
	display:block;
}

/* Footer Menu */
#footerMenu{
	padding-top:.35em;
	color:#ffffff;
	background:url(../images/global/v3_footer.gif) no-repeat;
	height:25px;
}
#footerMenu a{
	color:#ffffff;
	text-decoration:none;
}
#footerMenu a:hover{
	color:#ffc500;
}

The html code in the is here:

<!--- [START] MAIN MENU --->
<ul id="mainMenu">
<li id="link_home" ><a href="/index.php">             <span> HOME         </span>   </a> </li>
<li id="link_software" class="subMenu">     
<a href="/software">                                <span> SOFTWARE     </span>   </a>

<ul id="sublink1">
     <li>  <a href="/software/onlinestore">                ONLINE E STORE    </a> </li>
     <li>  <a href="/software/dealersolution">             DEALER SOLUTION   </a> </li>
     <li>  <a href="/software/realtorsolution">            REALTOR SOLUTION  </a> </li>

     <li>  <a href="/software/restaurantmenu">             RESTAURANT MENU   </a> </li>
</ul> 
<li id="link_requirements"><a href="/requirements"> <span> REQUIREMENTS </span>   </a> </li>
<li id="link_support">     <a href="/support">      <span> SUPPORT      </span>   </a> </li>

<li id="link_services" class="subMenu">    
<a href="/services">                                <span> SERVICES     </span>   </a> 
<ul id="sublink2">
     <li>   <a href="/services/hosting">                   HOSTING           </a> </li>
     <li>   <a href="/services/installation" >             INSTALLATION      </a> </li>

     <li>   <a href="/services/customization" >            CUSTOMIZATION     </a> </li>
</ul> 
<li id="link_clients">     <a href="/clients">       <span> CLIENTS      </span>       </a> </li>
<li id="link_usefull" class="subMenu">     
<a href="/usefull">                                 <span> USEFULL      </span>      </a>

<ul id="sublink3">
        <li> <a href="/usefull/topics" >                   TOPICS            </a> </li>
        <li> <a href="/usefull/software" >                 SOFTWARE          </a> </li>
        <li> <a href="/usefull/downloads" >                DOWNLOADS         </a> </li>

</ul> 
<li id="link_contact">     <a href="/contact">       <span> CONTACT      </span>       </a> </li>
</ul>
<!--- [END] MAIN MENU --->