Hyperlink moved on Mouseover

HTML & CSS
1

Anyone able to enlighten why would the links in the footer move when it is being moused over?

Any help rendered is greatly appreciated.

Link to website.

<!--footer start -->
<div id="footer">
  <div id="footer-holder">
    <div class="footer-nav">
      <ul>
        <li><b><u>About Us</u></b></li>
        <li><a href="<?php echo $this->getUrl('aboutus') ?>">Clothing Republic</a></li>
        <li><a href="<?php echo $this->getUrl('customer/account/create') ?>">Sign up</a></li>
        <li><a href="<?php echo $this->getUrl('latest-update') ?>">Latest update</a></li>
        <li><a href="<?php echo $this->getUrl('terms-conditions') ?>">Terms and Conditions</a></li>
        <li><a href="<?php echo $this->getUrl('privacy-policy') ?>">Privacy Policy</a></li>
        <li><a href="<?php echo $this->getUrl('disclaimer') ?>">Disclaimer</a></li>
      </ul>
    </div>
    <div class="footer-nav">
      <ul>
        <li><b><u>Customer Services</u></b></li>
        <li><a href="<?php echo $this->getUrl('contacts') ?>">Contact us</a></li>
        <li><a href="<?php echo $this->getUrl('payment') ?>">Payment</a></li>
        <li><a href="<?php echo $this->getUrl('buying-guide') ?>">Buying guide</a></li>
        <li><a href="<?php echo $this->getUrl('shipping-delivery') ?>">Shipping and Delivery</a></li>
        <li><a href="<?php echo $this->getUrl('return-policies') ?>">Return Policies</a></li>
      </ul>
    </div>
    <div class="footer-nav">
      <ul>
        <li><b><u>Payment Methods</u></b></li>
        <li><img src="<?php echo $this->getSkinUrl('image/Payment_Method_Logo.png'); ?>" alt="" title="" border="0"/></li>
      </ul>
    </div>
    <div class="footer-nav">
      <ul>
        <li><b><u>Shipping Methods</u></b></li>
        <li><a href="http://www.singpost.com/" target="_blank"><img src="<?php echo $this->getSkinUrl('image/Singpost.png'); ?>" alt="" title="" border="0"/></a></li>
        <li><a href="http://www.citylinkexpress.com/main.php" target="_blank"><img src="<?php echo $this->getSkinUrl('image/Citylink.png'); ?>" alt="" title="" border="0"/></a></li>
        <li><a href="http://www.ups.com" target="_blank"><img src="<?php echo $this->getSkinUrl('image/UPS1.png'); ?>" alt="" title="" border="0"/></a></li>
      </ul>
    </div>
    <div class="footer-nav">
      <ul>
        <li><b><u>Follow Us On</u></b></li>
        <div style="padding-left:1px;"><a href="https://www.facebook.com/pages/Clothing-Republic/245763695465304" target="_blank" title=""><img src="<?php echo $this->getSkinUrl('image/fb.png'); ?>" alt="" title="" border="0"/></a>
        <a href="https://plus.google.com/b/114348134915957682266/114348134915957682266/posts" target="_blank" title=""><img src="<?php echo $this->getSkinUrl('image/Google.png'); ?>" alt="" title="" border="0"/></a>
        <a href="https://twitter.com/@republiclothing" target="_blank" title="Follow us on Twitter"><img src="<?php echo $this->getSkinUrl('image/twitter.png'); ?>" alt="" title="" border="0"/></a>
        <a href="https://pinterest.com/republiclothing/" target="_blank" title="Follow us on Pinterest"><img src="<?php echo $this->getSkinUrl('image/Pinterest.png'); ?>" alt="" title="" border="0" /></a></div>
      </ul>
        </div>
    </div>
  	
  <div id="credit">
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td><?php echo $this->getCopyright() ?></td>
        <td><img src="<?php echo $this->getSkinUrl('image/bg-sign.png'); ?>" alt="" title="" border="0"/></td>
      </tr>
    </table>
  </div>
</div>
</div>
<!--footer end -->

CSS

#footer {
	background:url(../image/bg-footer.png) top left no-repeat;
	width:960px;
	height:260px;
}
#footer-holder {
	height:200px;
	width:880px;
	overflow:hidden;
	padding: 20px 50px 0;
}
.footer-nav {
	float:left;
	width:155px;
	margin:0 20px 0 0;
}
.footer-nav ul li {
	display:block;
	color:#ffffff;
	padding:2px 5px;
	text-transform:uppercase;
	/*font-family: Tahoma, Geneva, sans-serif;*/
        font-family: Candara, Arial;
        font-size:12px;
	font-weight:bold;
}
.footer-nav ul li a.email {
	
	text-decoration:none;
	color:#ffffff;
	text-transform:uppercase;
	/*font-family: Tahoma, Geneva, sans-serif;*/
        font-family: Candara, Arial;
	font-size:12px;
	font-weight:normal;
	padding:0;
	background:none;
}
.footer-nav ul li a.email:hover {
	display:block;
	text-decoration:underline;
	color:#ffffff;
	text-transform:uppercase;
	/*font-family: Tahoma, Geneva, sans-serif;*/
        font-family: Candara, Arial;
	font-size:12px;
	font-weight:normal;
	padding:0;
	background:none;
}
.footer-nav ul li a {
	display:block;
	text-decoration:none;
	color:#ffffff;
	padding:0px 0px;
	text-transform:uppercase;
	/*font-family: Tahoma, Geneva, sans-serif;*/
        font-family: Candara, Arial;
	font-size:12px;
	font-weight:normal;
	/*background:url(../image/arrow-white.png) left no-repeat;*/
}
.footer-nav ul li a:hover {
	display:block;
	text-decoration:underline;
	color:#ffffff;
	padding:2px 0px;
	text-transform:uppercase;
	/*font-family: Tahoma, Geneva, sans-serif;*/
        font-family: Candara, Arial;
	font-size:12px;
	font-weight:normal;
	/*background:url(../image/arrow-white.png) left no-repeat;*/
}
#credit {
	width:600px;
	margin:0 auto;
	text-align:center;
	/*font-family: Tahoma, Geneva, sans-serif;*/
        font-family: Candara, Arial;
	font-size:10px;
	color:#666666;
	text-transform:uppercase;
}
2

I have solved this by using: display:inline-block;

3

Your hover state code is just repeating what your already setting for the anchor on its normal view state, the reason why it’s moving is because your changing the padding from 0 to 2 which is changing the line height for the text. The following is all you need :slight_smile:

.footer-nav ul li a:hover {
    text-decoration: underline;
}
4

The hover state is set to apply 2px top and bottom padding. This causes the movement.

You need not restate all CSS declarations in the hover rule, only those that differ. So remove all but the one applying text-decoration.

.footer-nav ul li a:hover { text-decoration: underline; }

Check through your stylesheet for other instances of redundant declarations.

5

Thanks for the help.

Yep I should remove all the redundant declarations since I only need text to be underlined on hover.