I am using javafx 2.2 for my desktop application.
The problem I am facing is that when I hover on the buttons some of the part of text gets hidden. The problem is only on some of the machines. Attached is a screenshot of the save button. The text (Save) gets hidden when I focus or hover on the button.
I tried removing the button: hover CSS but now when I click on it, then I get the issue.
I tried removing the button: hover CSS but now when I click on it,
then I get the issue.
Its hard to diagnose the cause with no code provided, however given that by removing the hover styling you removed the behaviour on hover, have you also tried removing the :focus and :active classes? These are typically assigned during a click event.
What you may also want to do is take the hover class you removed, look at the properties and remove each one at a time to find the culprit- if this doesnt work there is likely some other runtime manipulation of the element happening, it'll be impossible to chase up without code unfortunately.
Related
I'm creating this toggle component but as you can see in the gif whenever I press it on a mobile device there's this flashing shadow behind it, which is probably some native behaviour to indicate the button is being pressed.
I'm trying to get rid of it as it makes the component look kinda clunky and not very smooth. I tried several combinations of props like changing the background color, shadow, transitions, pseudo selectors like :active and others, even changing the element from <button> to <div>, nothing really works and I couldn't find a solution for this anywhere.
Thanks in advance for any help!
On this website, on Chrome, when hovering or clicking the "EXPLORE" button, I am getting a lot of weird shadowed boxes popping up in random places. What could this be from? I have inspected the elements but it doesn't seem that any of them could be causing these.
A screenshot below:
In your stylesheet, I'm seeing some box-shadows (and it looks like box-shadows, not text-shadows). And they only appear on hover so chances are, when you inspected your elements, you didn't inspect them on their hover states.
Regardless, go in to your stylesheets and search for box-shadow and set it to none.
Open your site in Firefox or Chrome
Reproduce the error
right click on the weird shadow box and select inspect this
look for a box-shadow in your inspector and disable by clicking off the checkbox
If it worked, give yourself a cookie! You're a master debugger
There's a .tooltip that's being loaded via js. There was 18 instances of it being called in the custom.js file. If you don't want it, you can just stop calling it from within this file.
Alternatively, there are 27 instances of .tooltip in your css file. You can go through an remove them or just add .tooltip {border-style: hidden;} in you html file and it should remove the border.
[EDIT]
I took a screenshot of the Chrome inspector:
You can see the element being added via js when you hover over the page down chevron. You can get rid of the tooltip altogether, or inspect the .tooltip, .fade, .top or .in css to see which one of these items is creating the offending box.
You should be able to make this stop just using css. My understanding is, if you put the css directly in the html it should trump whatever is in your css file if you don't want to change the file itself. HTH
It turns out the issue was with blur: the background was using a blur filter and this created weird shadows. I am not sure why and how this was happening, though. I removed the blur and just blurred the actual BG image in Photoshop.
It seems like I was encountering the same problem as in this question.
I have a bit of a IE8 problem (sound familiar?)
I have a button. when you hover over the button the hover state produces a larger box that has html inside. in this particular case, it's a small music player.
so it goes like this, when you hover over the button it produces a small music player with clickable links and some text. you can move your mouse anywhere inside this box, but as soon as you leave the box/music player, the hover state goes away again.
sorry but I don't know how else to explain it.
this all works a treat except for IE8.
in IE8, the hover state disappears as soon as the mouse leaves the original small button. so navigating around the music player becomes impossible.
now I have noticed that when there is no html in the hover box, it works fine, but when there is html (in this case an iframe) it loses the hover as soon as I touch any html inside the hovering box. so it looks like the problem is not the hover box, but the code inside the box that makes it lose focus
what I would like to know is, is this a known issue in IE8, or could it just be bad coding from my side. in which case i can post the css.
I've had problems with :HOVER states in IE8 too and I noticed that the same CSS (even pointing to the same external CSS file) worked on some pages but not others. The solution for me was to consistently add a DOCTYPE to the top of all pages (above the starting HTML tag).
It seems obvious now, but sometimes (especially when editing old sites) the DOCTYPE is not always specified.
I hope this helps!
Your problem doesn't seem to lie in hover itself. Firstly you assume some window height and your project just look weird if the height is different. Assuming you did some very exact calculations on such assumptions your problem is probably the box model problem. box-sizing:border-box might help, but you would have to recalculate everything.
Also you can use timeout before the elements gets hidden/drop down so that micro mouse movements don't shake elements and maybe allow to "catch" them.
Having both things in mind all hovering problems should be fixable.
EDIT: For iframe hover have a look at: Iframe hover not working in IE (all versions).
I have a site where the background-image jumps up on hover state and I can't for the life of me find the specific css that does this.
I'm able to get to the "offending" link and give it a border and change the padding and margin. The problem is that firebug and chrome inspect does not show me what happens on the hover state.
So I want a way to see what additions to the normal css state happens on :hover.
Any pointers?
(P.S. IE 8 doesn't have this issue - ie no jumping of background image)
Try using the Inspect function in FireBug to focus in on the element in question. It will show you all related CSS, including any CSS that is related to :hover. You can also see in this way what changes happen to the elements CSS (and any other DOM attribute) when you hover your mouse.
In case the changes are coming from some JavaScript, try out the Visual Event bookmarklet. Activating it on the page will let you see all events that are tied to the element in question.
In Internet Explorer, there is unnecessary padding that occurs to the left and right within the button when the button name is large. As a result of this, the known solution is to add "width: auto" and "overflow:visible" to the button style, but doing so will inadvertently make the text in the button disappear when the user scrolls the page down and then back up.
I would very much like to use the style I've included so the padding stays removed, but more importantly resolve the issue with the button text disappearing. It's really an odd one!
I've created this DEMO page for you to test the code where it's happening: http://jsbin.com/uhuze3
Note: You'll need IE7 to see the issue, so for those who don't have it, I create this video for you to see the issue. http://screencast.com/t/MTg0NzY2Zj
I was able to resolve this and improve the code a bit.
You can see the code here:
http://jsbin.com/uhuze3/4
This was the old code:
http://jsbin.com/uhuze3
Edit by Johnny5 :
It seem to be the combinaison of "height" and "line-height" that correct the bug.