CSS hover increasing vertical margin on horizontal mouse move

HTML & CSS
1

Hi All

I’m working on a new site with a menu I’ve used before.

When the mouse moves horizontally, I get an extra space between divs.

http://purple-mouse.co.uk/ripon/

Any clues?

thanks

Mandy

2

can you be a bit more specific? It looks OK in Chrome 37 in Windows 7

3

This is how it looks to start with:

It stays like this if the hover is induced by a vertical mouse move but when the mouse moves horizontally, I get this:

4

Ah - just realised its only in IE!!!

Should have known

BTW - I’ll be embedding the font later

5

Using Firefox 33 Windows OS I don’t see that from any mouse activty, but I do see it when I make the viewport narrower.

6

I’ve broken my own rule about mobile first on this one.

You’re right - It happens in all the browsers with a reduced window width.

Well that’s more info for troubleshooting.

7

No, in Chrome, it doesn’t :slight_smile:

8

Weird - it does for me:

247×566 50.2 KB

9

Anyway - I need to fix it either way. Perhaps I need to start again with the css for a narrow screen.

10

Thanks for looking anyway.

It’s fixed now - I hadn’t isolated the ul I used elsewhere.

M

1 Like