: Sprite css not hovering correctly I have a sprite that add a couple of images added. I'm not sure if it is the case of the positioning of the actually images in the sprite or just a case

@Turnbaugh909

Your measurements appear incorrect.

The Tablet icon looks to be 40 px wide to me, not 47. Therefore the CSS is incorrect.

Updated Fiddle: jsfiddle.net/j7RM3/1/
And the correct CSS:

.report-option:hover {
cursor: pointer;
}

.report-option.selected {
font-weight: bold;
}

.report-option-icon {
background: url(http://assets.clickmotive.com/Reporting/report-options-sprite2.png) no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.report-option-icon-desktop {
width: 57px;
height: 54px;
}

.report-option-icon-mobile {
width: 33px;
height: 54px;
}

.report-option-icon-combined {
width: 58px;
height: 54px;
}

.report-option-icon-tablet {
width: 41px;
height: 54px;
}

.report-option-label {
display: block;
text-align: center;
}
#Desktop -Button .report-option-icon
{
background-position: 0 0;
}
#Desktop -Button.selected .report-option-icon, #Desktop -Button:hover .report-option-icon {
background-position: -57px 0;
}

#Mobile-Button .report-option-icon{
background-position: -114px 0;
}

#Mobile-Button.selected .report-option-icon, #Mobile-Button:hover .report-option-icon {
background-position: -147px 0;
}

#Combined-Button .report-option-icon{
background-position: -180px 0;
}

#Combined-Button.selected .report-option-icon, #Combined-Button:hover .report-option-icon {
background-position: -238px 0;
}

#Tablet-Button .report-option-icon
{
background-position: -299px 0px;
}

#Tablet-Button.selected .report-option-icon, #Tablet-Button:hover .report-option-icon {
background-position: -343px 0px;
}

#report-container {
width:1000px;
margin-left:auto;
margin-right:auto;
position:relative;

}

Vote Up Vote Down