I have a wordpress site and one of the pages has got the form with select box. The select dropbox works fine on PC browsers and even on mac safari. The only issue is on mac chrome. When I hover on the select box to select the option and do nothing the option lists is glitchy and flickering. I haven't used any kind of css or jquery plugin for select box, just the normal css has been used.
I googled but didn't find anyone having such issue or may be I couldn't type the proper keyword while searching. Can anyone provide an idea how can this be fixed.
Thank you the help.
Related
I have an issue with a website being programmed in WordPress. A drop down menu is showing correct in Chrome but not in Safari. See attached images, we want a clean drop down with symbol ∨ and not with arrows.
Any help would be greatly appreciated.
Best,
Don
Correct drop down as shown in Chrome
Incorrect drop down as shown in Safari
Inputs have a default style on each browser, this is normal behaviour, you should take a look at this stackoverflow article How do I style a <select> dropdown with only CSS? to customize it accross all browsers.
Remember also to do some research first before asking question, most of the time, answers are already out there.
I got some weird border on the dropdown of an autocomplete input. Tried it on other people computer and they don't see the same issue. Anyone came across this strange behavior before? It's a ReactJS component. The reason why I don't post the code is because this only happen to my Chrome browser and not to other people. Checked my Chrome extension, there's nothing related to CSS modification or anything.
I should start by saying I'm no expert when it comes to code and web design. That said, I have recently upgraded to OS X 10.9 Mavericks. After updating I'm experiencing a weird bug, specifically on my website and others like it using the wordpress theme WPfolio Two. When you hover over a link, the link jumps and drops to the next line. As soon as you move your mouse away from the linked text the text link hops back up to the line it's supposed to be on. This only happens using Chrome or Safari, it does not seem to happen in Firefox. For an example hover over any link on on either of these two pages http://jasonirla.com/category/news/ or http://notlaura.com/wpfolio-two/read-me/ Thie bug does not seem to effect drop down navigation menus or some (but not all) links in sidebar widget menus.
The bug makes it practically impossible to click the jumping link. I'm not experienced enough to say if this is a browser bug, a OS X bug, a problem with the code in the wordpress them I'm using or what. I am comfortable editing and writing small additions to the theme code using a child theme CSS but in this instance I have no idea where to start or what I'm looking for (to fix). All I know is that this problem did not occur when I was still running 10.8 mountain lion on my mac.
If anyone has any experience with problem like the one I'm experiencing and could offer me some advice I'd really appreciate any help you can offer. I've been searching all over for a week now and haven't been able to find any answers and nothing I've tried seems to make a difference. Thank you for any help or advice you are able to offer.
Can't leave a comment, so I hope this will help you:
Check your font-style on this hover link, is it bold on hover?
Do you use another font-size on hover?
Do you use a iOS compatible font on hover? (using a font that only works on windows systems will be transformed on iOS devices and could cause this bug.
I was contacted by the designer of the WP theme (WPfolio Two), there's a style on 193 of the CSS "display:compact" which is the problem. I put block comments around that line /* display:compact */ and the bug is fixed. Thanks for the initial help #lickmycode – user1544398 just now edit
In my application, I am including one page within another via an iframe. I'm working on a quick prototype here, so I don't want to take additional time right now to implement something fancier].
Everything looks good except for IE10 on Windows 7. From what I can tell, the style sheet of the iframe is being added into the cascade of the style sheet for the page and causing strange display errors. I'm a little dumbfounded this is even possible.
If I comment out the iframe, everything renders correctly.
I can also see the styles changing as the iframe loads:
Pre-iframe: http://screencast.com/t/8qcl2U4Uuy
Post-iframe: http://screencast.com/t/fzR9esWsq
Anyone else experience strange behavior like this?
Thanks in advance.
Thank you for your reply. My coworker was actually able to help me trace this back to an issue with the IE10 developer toolbar.
I was able to create a file that replicates the issue: https://dl.dropboxusercontent.com/u/1686497/iframe.zip
If you open the index, you'll notice that there is no margin on the body. While you have that page open and you open the F12 Developer Toolbar in IE10 (10.0.9200.16540) on Windows 7 (at least), you will see the body becomes padded and the parent window font switches to Times. Hope this helps someone!
I have built a context menu but have found annoyingly that when I right click on my site in firefox all text and images just seem to randomly get selected. It is not a JS issue as I have removed all JS from the site. Thinking it must be a css issue. I have never encountered anything like this before...
I don't have an example page to show I'm afraid. Has anyone experienced this before in Firefox. I am using the latest FF4.
Cheers Guys!
*UPDATE:*
Here is a pasting of the pure html from the page that is having issues,
http://jsbin.com/aneja4/3/edit
did you try to disable all your addons you have installed? maybe one of them is causing the problem.
I have FF 4 but neven encountered this problem before.
And I could be wrong but I don't know of any css code that would be able to select text. it's pure for the design and structure of the site. it will be mostlikely a js problem or something else
I have seen this too... I think it has something to do with the way the site is structured... If you have nexted divs, or a div that does not quite cover the entire page, a right click on the parent div seems to select everything in the nested div. It's quite annoying... especially when trying to build a custom context menu, or use the default menu to refresh the page...
Any fixes/changes that we should know about for FF that is causing this? I'm using FF4 and XP (yeah, yeah... corp. system)
JF
It's likely a problem with your HTML layout that firefox is struggling to work with. But without seeing any code, it's not possible to speculate any further down that path. #JDF's suggestions may help you, though.
If you can't work it out, and can't live with it, you could just disable the ability to select text.
In Firefox (and other standards-compliant browsers), you'd use the CSS user-select: none;.
See this question for more info on how to achieve this: How to disable text selection highlighting using CSS?
This is most likely caused by having a contentEditable element on your page. Any element (other than body it seems) that contains editable content will be highlighted/selected when you right click on it in Firefox (4.0 and 5.0 is all I can confirm). If everything on your page is wrapped in a div it'll appear that the whole page is selected. If you (can) right-click somewhere on the body the regular context menu should work.
Although I can't see any instances of contentEditable in your code on jsbin, it could be added by a script that I can't see (possibly even modernizr?).
I think this is related (although it doesn't match exactly)
http://support.mozilla.com/en-US/questions/766166
http://aloha-editor.org/ exhibits the same behaviour when right-clicking anywhere inside the #wrapper div.