Question

Something is obviously off in my CSS, but I can’t for the life of me figure out what. I have 2 divs representing a forward and back arrow. I change the background on :hover. The images are perfectly lined up in photoshop, however in a browser the :hover image appears slightly shifted and skewed.

Site is here (images are forward/back for the portfolio):

http://66.147.244.91/~warpain3/portfolio_identity/

For what it’s worth, here’s a snapshot of the CSS from Chrome Devloper Tools:

:Hover

element.style {
}
Matched CSS Rules
nggallery.css:271
.ngg-imagebrowser-nav .next a:hover {
background: url('../images/forward_arrow_hover.png') top left no-repeat;
width: 40px;
}
nggallery.css:230
.format_text .ngg-imagebrowser-nav a:hover {
text-decoration: none;
}
nggallery.css:261
.ngg-imagebrowser-nav .next a {
float: right;
border: none;
margin-right: 0px;
padding: 0px 0px;
width: 40px;
height: 29px;
background: url('../images/forward_arrow.png') top left no-repeat;
}
nggallery.css:226
.format_text .ngg-imagebrowser-nav a {
text-decoration: none;
}
style.css:126
.format_text a:hover {
text-decoration: none;
}
style.css:125
.format_text a {
text-decoration: underline;
}
style.css:50
a, a:hover {
text-decoration: none;
}
layout.css:281
a, h2 a:hover, #logo a:hover {
color: #2361A1;
}
style.css:50
a, a:hover {
text-decoration: none;
}
style.css:36
* {
padding: 0;
margin: 0;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Inherited from div.format_text
layout.css:125
.format_text {
font-size: 1.4em;
line-height: 1.571em;
}
Inherited from body.custom.portfolio_identity
custom.css:7
body.custom {
font-family: Helvetica;
color: #60483C;
}
layout.css:279
body {
color: #111;
}
layout.css:81
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
style.css:35
body {
font-size: 10px;
}

Non-hover:

element.style {
}
Matched CSS Rules
nggallery.css:261
.ngg-imagebrowser-nav .next a {
float: right;
border: none;
margin-right: 0px;
padding: 0px 0px;
width: 40px;
height: 29px;
background: url('../images/forward_arrow.png') top left no-repeat;
}
nggallery.css:226
.format_text .ngg-imagebrowser-nav a {
text-decoration: none;
}
style.css:125
.format_text a {
text-decoration: underline;
}
layout.css:281
a, h2 a:hover, #logo a:hover {
color: #2361A1;
}
style.css:50
a, a:hover {
text-decoration: none;
}
style.css:36
* {
padding: 0;
margin: 0;
}
user agent stylesheet
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Inherited from div.format_text
layout.css:125
.format_text {
font-size: 1.4em;
line-height: 1.571em;
}
Inherited from body.custom.portfolio_identity
custom.css:7
body.custom {
font-family: Helvetica;
color: #60483C;
}
layout.css:279
body {
color: #111;
}
layout.css:81
body {
font-family: Georgia, "Times New Roman", Times, serif;
}
style.css:35
body {
font-size: 10px;
}

Thanks so much for any input – I need to get this site fixed ASAP!

Answer 1

Well simple answer :

Your two image are not the same size