Databases
StackOverflow2013
Postsdbo
POImage skews on rollover - can't figure out why
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImage skews on rollover - can't figure out why
    text
    copied!<p>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. </p> <p>Site is here (images are forward/back for the portfolio):</p> <p><a href="http://66.147.244.91/~warpain3/portfolio_identity/" rel="nofollow">http://66.147.244.91/~warpain3/portfolio_identity/</a></p> <p>For what it's worth, here's a snapshot of the CSS from Chrome Devloper Tools:</p> <p><strong>:Hover</strong></p> <pre><code>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; } </code></pre> <p><strong>Non-hover:</strong></p> <pre><code>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; } </code></pre> <p>Thanks so much for any input - I need to get this site fixed ASAP!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload