If you go to http://anyjob.brightsitesconsulting.co.uk on Chrome you'll notice that when hovering over the 'contact us' button the white/grey background does not completely cover the button. There is a small gap to the left and bottom.

This also occurs when you're on the 'contact us' page.

The obvious solution would be to increase the width and padding of this list element. However, if I do this it's then ruined in FF and IE.

Any ideas how I could fix this for Chrome?


  • Can you show the css code? Trevor Landau over 8 years ago
  • When I use firebug in Chrome it shows that last li to be as 49px height instead of 50. Is there something set in your css for the the last item in the li? Trevor Landau over 8 years ago

1 answer

This was chosen as the best answer

In navigation.css line 96 you're overriding the li > a property of padding: 12% 0; with padding: 10% 0 11%. That explains why the background hover effect is not consistent.

Answered over 8 years ago by Derek Punsalan
  • Ah yes that fixed it. Thanks. olivaw over 8 years ago