SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Rollover Link

    Hi there,

    I've created tonnes of CSS Rollovers before so usually know what I'm doing but for whatever reason it doesn't seem to be working this time around.

    I'm trying to create some Social Media links using Rollover Images as the links.

    This is the HTML Code:

    HTML Code:
    <div id="SocialMedia">
          <ul id="SocialMedia">
                <li class="FbHeaderLink"> <a class="SocialButton" href="http://facebook.com/#" title="Find us on Facebook" target="_blank">  </a>'; </li>
          </ul>
    </div>
    And I have applied the following CSS Styling:

    Code CSS:
    div#SocialMedia {
    	float:right;
    	padding-top:20px;
    }
     
    ul#SocialMedia {
    	list-style-type:none;
    	display:inline;
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	outline: none;
    	z-index: 1000;
    }
     
    li.FbHeaderLink {
    	background-image: url('/wp-content/themes/spectrum/images/icons/FacebookRoundLarge.png');
    	width: 40px;
    	height: 40px;
    }
     
    li.FbHeaderLink:Hover {
    	background-image: url('/wp-content/themes/spectrum/images/icons/FacebookRoundLarge.png');
    	background-position: 0 -41px;
    	width: 40px;
    	height: 40px;
    }
     
    #SocialMedia li.FbHeaderLink a.SocialButton {
    	width: 40px;
    	height: 40px;
    }

    As I said, I have done this before and it works perfectly. However, this time around it doesn't seem to put the link there. The background image is there. The <li> changes background as you hover it as expected and changes back on mouseout. But the link isn't actually there even though I have styled it to be 40x40.

    The result of this is that the "title" element of the link is not being displayed when you mouseover it and obviouslly, the button is doing nothing but change colour!

    Any ideas why it's not working this time around? Am I blindly forgetting to do something?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Well I CAN tell you that the anchor isn't 40x40 because it's default as an inline element. As such it doesn't accept width/height properties. Give it display:block and see if it works there .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick - thank you. sometimes it just needs a fresh pair of eyes to spot the error that's so blatantly obvious

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2006
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your pseudo class should be on your anchor tag surely eg a:hover ??

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CBResources View Post
    That did the trick - thank you. sometimes it just needs a fresh pair of eyes to spot the error that's so blatantly obvious
    You're welcome, glad it worked . Such simple mistakes, eh?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •