- This topic is empty.
May 21, 2014 at 6:56 am #170789
Okay so on the contact page of a site I’m working on I have some dropdowns, on every other browser they’re working fine, but in Firefox (spanning across multiple versions) the options which appear when the select is clicked disappear as soon as the mouse hovers over them rendering them useless.
When disconnect my styles file from the html it works fine so it’s definitely in the css. But if I then only comment out the code pointed at the contact form then it still has the problem. So something else in my stylesheet is causing this problem and I can’t for the life of me figure out what it is.
Has anyone else encountered this problem before?
Here’s a link to a GIF of the problem
We can’t diagnose CSS from an image.May 21, 2014 at 7:12 am #170791
Yeah of course. I was more just adding the image in case anyone recognised the problem visually.
Here’s the sass being used on the selects:
background: url(‘../img/down-arrow.png’) no-repeat #6B6B6B;
background-position: right center;
border: 1px solid #5a5a5a;
box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, 0.2), 1px 1px 1px rgba(255, 255, 255, 0.1);
padding: 7px 5px 7px 10px;
Apart from that from what I can tell from the inspector there’s nothing else which is effecting them.May 21, 2014 at 7:13 am #170792May 21, 2014 at 7:30 am #170794
Interesting…you can make a selection in FF if the mouse button is still down.
I’m wondering if you need to be adding a click function to the arrow.
BTW…what does this mean? It’s weird.
text-overflow: ”;May 21, 2014 at 7:35 am #170796
Yes, you can also move the mouse all around it and it stays open. But as soon as the mouse goes over the options it disappears.
Yes maybe just disable the select default functionality with jquery but in this case what needs to be made visible? How does the form retain it’s function in that case?
Oh and that’s just a not very pretty hack to get rid of the ugly default arrow on Firefox dropdowns. But it still has the same problem without it.May 21, 2014 at 7:38 am #170797
Is there JS involved somewhere?May 21, 2014 at 7:39 am #170798
There’s JS doing other stuff on the page but nothing targeting selects, but if I leave that and take the css away the dropdowns work fine again. So I’m pretty sure it’s the CSS.May 21, 2014 at 8:21 am #170799
Then I can only suggest that you disable one line of CSS at a time until you find the right one….but I couldn’t find one that seemed to have any effect.May 21, 2014 at 8:28 am #170800
Quick google search seems to indicate that this is a bug in FFMay 21, 2014 at 8:40 am #170801
Yes it would appear so, and yet I can get them to work without any styling on the page at all. Weird bug. Thanks for the helpJuly 28, 2014 at 9:52 pm #176727ikilroyParticipant
I had the same issue – one of the ancestor divs of the offending select had css property:
Removing that fixed the select.
Hope this will help anybody with the same problem.
- The forum ‘CSS’ is closed to new topics and replies.