0

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 of inexperience on my part.

If you go to the jsfiddle you will see how the hover jitters a bit: http://jsfiddle.net/willtx/j7RM3/

I would like it to hover like the others do. Thanks so much!

  • 2
    Better suited for stackoverflow.com - would appear to be an issue with incorrect measurements of the icons. The tablet icon seems to be 40px wide, not 47. (it seems jsFiddle is broken in chrome for me.. odd, that's a first.) – Scott Apr 16 '14 at 21:34
  • jsfiddle.net/j7RM3/1 updated with changed measurements – Scott Apr 16 '14 at 21:40
  • @Scott seems you solved it, why not make it an answer? – benteh Apr 17 '14 at 0:15
1

Your measurements appear incorrect.

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

Updated Fiddle: http://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;

}
  • Thank you @Scott!!!! Sorry if this was posted in the wrong forum. – Will Lopez Apr 17 '14 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.