Question

I am trying to make a simple rollover image for this page – http://www.radioandweb.com. The CSS Sprite code I’ve used works fine until I put it into the actual page structure. It then changes from being horizontal to being vertical. I am guessing this is because of interfering with other CSS properties.

Can someone suggest an easy fix for this? The image in question is in the top right corner (facebook, twitter, linkedin). Here is the CSS code:

ul#socialnavigation {
    width:109px;
    height:34px;
    margin-left:auto;
    margin-right:auto;
}
ul#socialnavigation li {
    position:relative;
    float:left;
    text-indent:-9999px;    
    list-style-type:none;
}
ul#socialnavigation li a {
    border:0;
    display:block;
    text-decoration:none;
    background:transparent url('http://www.radioandweb.com/wp-content/themes/u-design/styles/style1/images/socialnetworkrollovers.png') no-repeat;
}
li#facebook a {
    width:36px;
    height:34px;
}
li#twitter a {
    width:37px;
    height:34px;
}
li#linkedin a {
    width:36px;
    height:34px;
}    
li#facebook a:hover, li#facebook a:focus {
    background-position:0px -34px;
}
li#twitter a:link, li#twitter a:visited {   
    background-position:-36px 0px;
}
li#twitter a:hover, li#twitter a:focus {    
    background-position:-36px -34px;
}
li#linkedin a:link, li#linkedin a:visited { 
    background-position: -73px 0px;
}
li#linkedin a:hover, li#linkedin a:focus {  
    background-position: -73px -34px;
}

And here is the HTML code:

<ul id="socialnavigation">
   <li id="facebook"><a href="http://www.facebook.com" title="Facebook">Facebook</a></li>
   <li id="twitter"><a href="http://www.twitter.com" title="Twitter">Twitter</a></li>
   <li id="linkedin"><a href="http://www.linkedin.com" title="Linkedin">Linked In</a></li></ul>

Thanks, any help is really appreciated!

Answer 1

In your text.css file you have

li {
    margin-left: 30px;
}

which is conflicting with your sprite css. If you just update your “ul#socialnavigation li” to include something like “margin-left:auto” it should fix it.

Long live the okanagan! 🙂