www.webdeveloper.com
Results 1 to 4 of 4

Thread: link Hover Padding issue

  1. #1
    Join Date
    Sep 2009
    Posts
    19

    link Hover Padding issue

    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
    Code:
    <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

    Code:
    /* 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
    Code:
    #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

  2. #2
    Join Date
    Mar 2006
    Posts
    172
    See if this fixes it.

    In light.css change the following:

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


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

  3. #3
    Join Date
    Sep 2009
    Posts
    19
    and just like that, the problem is gone! thanks alot.

  4. #4
    Join Date
    Mar 2006
    Posts
    172
    Glad it worked out!

    cfh

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles