4

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

Nathan
  • 1,483
  • 3
  • 18
  • 41
Daniel
  • 202
  • 2
  • 7
  • *which I do by default in Chrome* - Why? – Jared Farrish Sep 02 '12 at 22:25
  • Try separating the buttons by a few pixels in the image (don't have them touching) - that might fix it. – Nathan Sep 03 '12 at 04:26
  • @JaredFarrish: My computer screen is kind of far from me. To compensate for that I have to zoom the text. I only zoom by default in chrome because it is the browser I use normally. It's also a good accessibility habit to allow to zoom a webpage (older people have more difficulties seeing small text and often zoom the text). – Daniel Sep 03 '12 at 09:30
  • @Nathan: I separated the images by 5px and that did the trick. Thanks for the tip :) – Daniel Sep 03 '12 at 09:34
  • Glad to hear! I added it as the answer. – Nathan Sep 03 '12 at 09:46

1 Answers1

1

In your image the buttons are touching each other - separate the buttons in the image by a few pixels and that should do the trick.

Nathan
  • 1,483
  • 3
  • 18
  • 41