SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hyperlink moved on Mouseover

    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.

    Code:
    <!--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
    Code:
    #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. #2
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have solved this by using: display:inline-block;

    Quote Originally Posted by kianboon View Post
    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.

    Code:
    <!--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
    Code:
    #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;
    }

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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

    Code CSS:
    .footer-nav ul li a:hover {
        text-decoration: underline;
    }
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

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

    Check through your stylesheet for other instances of redundant declarations.

  5. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help.

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


Bookmarks

Posting Permissions

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