Objective : To create a clickable button with a CSS rollover. The button is

Question

0

Asked: June 10, 20262026-06-10T18:15:58+00:00 2026-06-10T18:15:58+00:00

Objective : To create a clickable button with a CSS rollover. The button is

0

Objective: To create a clickable button with a CSS rollover. The button is intended to be blue and, when the mouse is over it, the color changes to orange.

Problem: My technique works fine for major browsers (Chrome, Firefox, IE). But when I zoom the page (which I do by default in Chrome), a small horizontal blue line appears on the top of the button when the mouse is over it

Here is an image with the problem:

http://hostpicture.eu/?di=JZ05

Any ideas on how to solve this problem?

There is no problem when the Zoom is set to 100%. But it appears as soon as I set the zoom to 110% or 120% in Chrome. I tested the page in Firefox with different values of zoom with no problem at all. I also tested in IE9. No problem for zooms of 100%, 125%, 200%, but the same problem appears for a zoom of 150%.

The code I used:

HTML:

<div class="ExerciseButtons">
    <a href="#">Check solution</a>
    <a href="#">Next exercise</a>
</div>

CSS:

.ExerciseButtons{
margin-top:40px;
padding-left:30px;
}

.ExerciseButtons a{
margin-right:20px;
width:135px;
height:33px;
display:block;
color:white;
background-image: url("images/EmptyNextExerciseButton.png");
background-position: top left;
background-repeat: no-repeat;
text-align: center;
line-height:33px;
font-weight: bold;
text-decoration: none;
vertical-align: middle;
float:left;
font-family: Arial, Helvetica, sans-serif;
}

.ExerciseButtons a:hover {
    background-position: bottom left;
    color:white;
}

The image I used (each button is 135px X 33px. The whole image is 135px X 66px):

http://hostpicture.eu/?di=1GL1