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.
Related
I've a website based on Html KickStart and I notice an annoying problem in IE10.
The issue: when you open the web page, the text in the input field is aligned against the left hand side of the field. When you put the focus on it, and start typing, the text jumps to the right (where it is supposed to be, as you can see in other browsers). When the field looses the focus, the text jumps left again, against the side once more. The input field in question is styled.
The problem is clearly visible on the Html KickStart demo site:
http://www.99lime.com/elements/
Here you can also find the css code files etc.
I don't seem to be able to find the cause of this behaviour. Any help would be greatly appreciated.
Check out this css property : https://developer.mozilla.org/en-US/docs/Web/CSS/direction
direction effects the css declaration being used known as text-align:start
which isn't supported by IE 10
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.
I'm trying to modify a default select box using CSS. I've already done it. But, some problems are happened at firefox. What I've done still now:
It's the perfect result on all browser except firefox and IE
At firefox, there are the problems:
(1) There are an unexpected border on the right side of the select box
(2) Padding of text of select box is much bigger than other input field.
At IE, same problem happened. There are unexpected and much clear box at the right of the select box:
How can I remove that unexpected line/box from firefox and IE. Also, what can be responsible for the padding problem at firefox?
Well, I've used this tutorial's concept to customize the select box using CSS only. And I've put my code at
jsfiddle.net/w9kFc/1/
(I can't add the select-icon image at jsfiddle from external link. So, I've taken the screenshot locally. But, I've given the image's link at the jsfiddle code. )
This seems to work in IE10: jsFiddle
Added a label around the select.
Replaced the text-indent with padding.
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 want to completely reset a button's inherited CSS so it behaves exactly like any other inline-block element. However, I've run into a problem where the text of a button is forever stuck vertically-centered.
In the fiddle (and screenshot) below, the button and div have the exact same styles according to the Chrome Developer Console, yet the button's text is vertically-centered, while the div's is not:
http://jsfiddle.net/rgthree/vT3a7/
Anyone know of the property or selector that will completely reset a button, specifically including its label position?
Answer
There's no way in any browser other than Chrome ~25. I reached out to the Chromium project about the it not working in Chrome 27 (see the #winterblood answer & comments). They said this:
The issue is that we now use margin:auto on the anonymous block inside the button to do the centering inside the button in order to get safe-centering. So, unfortunately, there's no way to style it from CSS. That you were able to control this behavior before was really implementation detail leaking out.
So, the true answer is that you cannot style this in any browser, except for Chrome ~25 where -webkit-box-align was inadvertently exposed to, as #winterblood answered.
For webkit you need to override -webkit-box-align with a value of baseline or start.
I have had no luck implementing this in Firefox yet (from a very brief look at it).