I've run into one of many Internet Explorer bugs ;)
I'm doing some custom styled input fields and they work exactly as supposed in all browsers, except IE! The inputfields have some padding added on both sides, which works fine on load when the input field isnt filled out with text. But whenever the inputfield gets filled out with text, it kind of ignores the padding that it has been given..
I've uploaded a screenshot of the problem:
...and made a very simple example so you can try for yourself: http://valuable.dk/test.htm
How do I solve this :) ?
Related
Placeholder text of fields in IE10 of the font family Comfortaa seem to be cut off on the right side.
Here is the fiddle: http://jsfiddle.net/fA89K/2/
It only happens on the initial paint of the browser in IE10. I tested it with a different font and it works fine. Comfortaa seems to be causing the issue...any suggestions on a fix (besides using a different font)?
I could always focus and unfocus the form fields on load...but that just seems really silly.
Edit:
Here is a screenshot:
Yeah I'm seeing the same issue on Win7 IE10. It shows if you focus on the field then un-focus which doesn't really help.
The solution is to set the letter-spacing to .01em then onload set it back to 0.
Works a treat.
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'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.
This is a strange issue...
getNode()
Trying to add a tinyMCE button (inside WordPress) that opens a TinyMCEPopup window.
There I need to check the current NODE where the user has clicked inside the text -- specifically if they have clicked inside a LI node/tag.
I'm using:
tinyMCE.activeEditor.selection.getNode().nodeName
Works well inside, FireFox, Chrome etc, but NOT in IE.
In IE I always get the node "DIV" and...
In IE it actually checks a completely different portion of the markup, like... it seems to get the parent node of the whole TinyMCE editor markup instead of where the user has clicked.
That's why it always returns a DIV.
In IE, when I click inside a LI element (in the visual view of the editor), it puts a strange frame around, which does not put my cursor inside that list element, unless I double-click the frame. See this screenshot here: http://screencast.com/t/9HVjMUvy
getContent()
Does also NOT seem to work in IE...
tinyMCE.activeEditor.selection.getContent()
(IE returns always "empty", nothing selected, while all other browsers give correctly selected portion of the text)
Any ideas how to fix these?
Much appreciated!
Concerning the resize handles you may get rid of them using the following tinymce configuration paramter
object_resizing : false
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.