CODEWITHSUNDEEP
cssgoogle-chromebackground-image
Jack Guy
Jack Guy

Reputation: 8523

Strange Chrome background-image cut off

On my website I have a header with buttons made from background-images and a jQuery hover event. The problem is, in Chrome and Chrome only (in my tests), when mousing over the button the hover image is slightly cut off by about a pixel. I've tested it some and realized it only appears when there is a scroll bar (for consistency's sake, I've added overflow-y: scroll to all of my pages). The problem is fixed if I subtract half a pixel from the width, but it also messes with the margins. The background images are an identical size, 102x42px.

Here is my CSS and a link to my website:

.menubutton
{
margin:0px auto;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}
.menubutton:hover
{
background:url('../img/buttons/menuhover.png');
color:#E0E0E0;
text-shadow: 0px 0px 1px rgba(0,0,0,0.75);
}

Upvotes: 1

Views: 3489

Answers (2)

NicMagnier
NicMagnier

Reputation: 408

I confirm the bug and like randy I think this is a problem with chrome and not your code. It seems the problem appear and disappear because of the width if the page, if I resize my window the problem appear and disappear.

After some trials and error it seems the problem come partially from the size td element that encapsulate your menubutton. After trying some things around I thing I found a workaround. Since you know both the size of the td element and the menubutton, you don't need an automatic margin. So:

.menubutton
{
margin:0px 24px;
margin-top:-10px;
background:url('../img/buttons/menureg.png');
width:102px;
height:32px;
display:block;
color:#6F6F6F;
font-size:16px;
text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
padding-top:10px;
text-decoration:none;
}

Can you test on your side to see if it resolves the issue?

Upvotes: 3

Randy
Randy

Reputation: 9819

I see your problem, but it look like a chrome bug though, not a code bug. two out of four elements have correct hover backgrounds, so its a bit strange. You can try to set the width of the element again in the hover, or make the element 1px wider and set background-repeat:none; to display the extra pixel. Bad solution though..

Upvotes: 0

Related Questions