link Hover Padding issue

[ViseExcizer]

Hi, This is a test site im developing in joomla, http://viralsifu.com/tanjung/
If you look at the site, the top menu has a padding problem, and it goes to the right on mouseover





The html

<div id="horiz-menu" class="moomenu">
											<ul class="menutop" >
			<li class="item1 active " id="current">
			<a class="topdaddy link" href="http://www.viralsifu.com/tanjung/"  >
						<span>Home Page</span>
		</a>	
			
</li>	
			<li class="item89 " >
		    <a class="topdaddy link" >
			<span>Corporate Profile</span>
		</a>
			
</li>	
			<li class="item90 " >
		    <a class="topdaddy link" >
			<span>Business Activities</span>
		</a>
			
</li>	
			<li class="item91 " >
		    <a class="topdaddy link" >
			<span>Investor Relations</span>
		</a>
			
</li>	
			<li class="item92 " >
		    <a class="topdaddy link" >
			<span>Media Relations</span>
		</a>
			
</li>	
			<li class="item93 " >
		    <a class="topdaddy link" >
			<span>Contact Us</span>
		</a>
			
</li>	
	</ul>
										</div>

The theme specific css file

/* Horizontal Menu */
#horiz-menu li, #horiz-menu li .link {color: #555;padding: 0 0 0 12px;}
#horiz-menu li.parent.sfHover .link.topdaddy {background: url(../images/light/menu-tab2-l.png) 0 0 no-repeat;padding: 0 0 0 7px;}
#horiz-menu li.parent.sfHover .link.topdaddy span {background: url(../images/light/menu-tab2-r.png) 100% 0 no-repeat;padding: 0 7px 0 0px;}
#horiz-menu li.active .link, #horiz-menu li:hover .link, #horiz-menu li.sfHover .link {background: url(../images/light/menu-tab-l.png) 0 0 no-repeat;padding: 0 0 0 7px;}
#horiz-menu li.active .link span, #horiz-menu li:hover .link span, #horiz-menu li.sfHover .link span {background: url(../images/light/menu-tab-r.png) 100% 0 no-repeat;padding: 0 7px 0 0px;}
/* IE6 Fix */
#horiz-menu li.parent-sfHover .link, #horiz-menu li.parent-sfHover .topdaddy {background: url(../images/light/menu-tab-l.png) 0 0 no-repeat;padding: 0 0 0 7px;}
#horiz-menu li.parent-sfHover .link span, #horiz-menu li.parent-sfHover .topdaddy span {background: url(../images/light/menu-tab-r.png) 100% 0 no-repeat;padding: 0 7px 0 0px;}

#horiz-menu li.active .link, #horiz-menu li:hover .link, #horiz-menu li.sfHover .link {color: #000;}

The main template.css file

#horiz-menu {padding: 8px 0;display: block;}
ul#horiznav.menutop, #horiz-menu ul.menutop {padding: 0;margin: 0;position: relative;top:45px; z-index:120;float: right;cursor:pointer; padding:0px 0px 0px 7px;}
#horiz-menu li, #horiz-menu li .link {position:relative;display: block; padding:0px 0px 0px 14px;}
#horiz-menu li:hover .link, #horiz-menu li.sfHover .link {z-index: 100;cursor: pointer;margin: 0;color: #fff; padding:0px 0px 0px 14px;}
#horiz-menu .link {white-space: nowrap;display: block;float: left;height: 30px;line-height: 30px;font-weight: normal;font-size: 14px;text-decoration: none;z-index: 100;cursor: pointer;color: #fff; padding:0px 0px 0px 14px;}
#horiz-menu li:hover .link, #horiz-menu li.sfHover .link, #horiz-menu li.active .link {z-index: 100;cursor: pointer;margin: 0;color: #fff; padding:0px 0px 0px 14px;}
#horiz-menu ul {list-style: none;padding: 0;margin: 0;}
#horiz-menu li {display: block;float: left;margin: 0  1px;padding: 0;font-weight: bold;}
#horiz-menu li .link span {display: block;padding: 0 2px;height: 30px;}
/* Top Main Menu Dropdowns */

I'm 100% sure that the css setting thats causing the link menu to move to the right is in one of the css files above. Can you please help me identify whats wrong? thanks

[CFHutton]

See if this fixes it.

In light.css change the following:

#horiz-menu li, #horiz-menu li .link {
     color: #555555;
     padding: 0 0 0 12px;
}

to this:

#horiz-menu li, #horiz-menu li .link {
     color: #555555;
     padding: 0 0 0 10px;
}

cfh

[ViseExcizer]

and just like that, the problem is gone! thanks alot.

[CFHutton]

Glad it worked out!

cfh