input::-ms-clear {
display:none;
}
IE11 input width changes when clicked -
this solution works for clicking the text box
Changing the text in text box changes the width in IE 11
http://jsfiddle.net/3TwKF/20/
Please let me know for any solution
Please change the css
table.fields input[type='text'], table.fields input[type='password'], table.fields select, .inpt
width: 98%; to width:100%
It will work. All the best
It look like it is a bug in IE you can use margin on the child element.
How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?
So change your percentage based padding to px or em based wil fix the problem.
https://jsfiddle.net/3TwKF/22/
padding: 2px .5em;
Related
How can I achieve that the text inside a div has the same padding-top in Firefox and in Chrome? In Firefox it has apadding-top of in this case 3px by default and Chrome only has 2px.
js fiddle
HTML
<div class="wrap">
<div class="content">Hello World</div>
</div>
CSS
.wrap{
border: 1px solid;
background: lightblue;
height: 50px;
width: 120px;
font-family: sans-serif;
}
If you want to vertical align text inside the div.
Refer the question to get your answer Vertically align text in a div
DEMO
You have 50px height in your div. So just simple give line-height:50px; property to your class. If you increase your height of your div , then increase you line-height as well.
If you want the align the text to center, then add the text-align:center;.
You simply need to set the text's leading with the CSS line-height property. Different browsers will likely have different defaults.
http://jsfiddle.net/vJB4F/2/
Do you use a reset css ?
See http://www.cssreset.com/, and test with.
The different browsers and their cores are using different default settings in the html code.
THe simplest solution is to use every time a reset css code.
That code must be included just before your code and will rearrange all the differences you may find further.
A reset css example
It seems I've stumbled on an annoying Internet Explorer 11 layout bug. (Ugh, I thought these days were behind us.)
In the following example, the padding on the right table cell disappears when you hover over it in IE11:
http://jsfiddle.net/xx4Z4/
This seems to arise because of an incredibly specific CSS scenario:
The element uses display: table-cell
The element uses percentage-based padding, e.g., padding: 0 5%
A subelement adds text-decoration: underline when the parent element is hovered over
If you change any of those three things, the problem goes away.
This seems to be an IE11 bug, but I'm wondering: Can anyone think of a workaround for this problem without abandoning display: table-cell and percentage-based padding?
Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".
I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.
Use margin
Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.
span
{
margin-left: 10%;
}
and ofcourse reset the padding of the sides:
div.table-cell {
display: table-cell;
padding: 20px 0;
}
This "solution" is not as dynamic as with percentage padding on the table-cell itself.
Why not?
It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell).
So to fix that i did 5 times the amount of cells (5 * 2 in this case), which would result in the right percentage.
However this is not dynamic when you want to add more cells.
jsFiddle
Use border
Use border which its position is "reserved" before the padding is resetted.
Reserved border
span
{
border-bottom: 1px solid transparent;
}
Change property that doesn't need re-calculation of position; color
div.table-cell-bug:hover span
{
border-bottom-color: black;
}
Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.
jsFiddle
I hope one of these quick fixes work for you.
I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)
Strange, no one mentioned to set table-layout:fixed; It's really important, otherwise the padding/width won't be calculated correctly on IE (and some other weird side-effects, depending on the use case), especially when you are using images inside it.
<style>
.table { display:table; table-layout:fixed; }
.table-cell { display:table-cell; }
</style>
<div class="table">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
Adding invisible top and bottom borders seems to fix the problem.
a {
border: solid rgba(0,0,0,0);
border-width: thin 0;
}
This prevents the anchors from moving on hover or focus.
I use rgba(0,0,0,0) instead of transparent for better compatibility with old IE which displays transparent in colour while rgba is rendered invalid and not displayed at all.
We had a similar scenario where none of the solutions above worked.
Instead we animate the width of our affected div after the page has loaded:
if (!!navigator.userAgent.match(/Trident\/7\./)){
$("#karina-rosner2").animate({'width': '20.1%'},1);
$("#karina-rosner2").animate({'width': '20%'},1);
}
This forces IE11 to recalculate the div's relative padding value and solved our problem well.
This can be "helpfully" solved by setting the paddding css-rules like this ->
element:hover,
element:active,
element:focus {
// padding example
padding-left: 1.5%;
}
Rememeber to set this only for IE since it can make all normal browser behave like a disco.
EDIT: Flexbox works for IE 10 and above so this "solution" is only needed for ie 9 and below.
These are all really good answers, and the media query option works well to identify only IE which has this problem with display:table-cell
What I did that I found worked well was employ vertical-align as a great way to direct the text contained within the display:table-cell element to where I wanted it to reside. Usually vertical-align doesn't do much to formatting, UNLESS it is in a table.
Here is my simplified HTML:
<li id="table-cell-element">
<a href="#">
<img src="event.png"/>
<small>Register for Event</small>
</a>
</li>
And here is the CSS:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;}
li a {display:inline-block;}
li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
small {display:block; font-size:60%; font-weight:bold; color:#333;}
}
You may also have to adjust the li a:hover {line-height} depending on what is in your CSS for those elements
Also, if you want this to work for IE 9 and below I suggest using conditional comments that add an "ie" class to the <html> tag and then create an IE9 style sheet. Thankfully the styling required for IE9 is relatively the same. But I only tested through IE9 and I am uncertain of your results for IE8 and IE7.
I just noticed this strange rendering of a very simple form.
Here's my markup/CSS: http://jsfiddle.net/a9PLM/
As you can see, text fields and the button share the same styles but their size is quite different.
Why does this happen?
Thanks!
This is because of the box model being used is different for the <input type="submit"> and the <input type="text">/<textarea>. You can make the box models the same by specifying them with CSS:
box-sizing: border-box;
-moz-box-sizing: border-box;
You can read more about box models here: http://www.quirksmode.org/css/box.html
I edited your jsFiddle to show it working: jsFiddle demo
I think this is a browser rendering issue... with buttons being displayed differently than text inputs.
To fix, add this to your css
form input[type="submit"]{
width:273px;
}
Example: http://jsfiddle.net/jasongennaro/a9PLM/1/
Padding on the text fields give it extra space on the sides. Set the padding of inputs and textareas to 0.
The problem is that the form parts are generally not rendered like normal HTML elements, and styling them is always a bit hit-or-miss. I would attempt to avoid a case like this that requires exact sizing, but if you can't, then split the selectors like this:
form textarea, form input[type=text]
{
width:250px;
padding:10px;
}
form input[type=submit] { width: 270px }
Note that I added 20 px (10 x 2) to the width to compensate for padding.
I've used this CSS-only solution which works in IE, FF and Chrome. Basically, the idea is to manually force the height of input elements to values larger than standard boxes. Do this for both text and button:
Set margins and padding to 0.
Set vertical-align to middle.
Use height/width to control text and button dimensions. Text height must be several pixels greater than font height (in order to override standard box dimensions). Height of button must be 2 pixels greater than text.
Example:
input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }
Contact box in the footer the textarea and input boxes are in a div 310px wide.
http://www.bantros.net
They have been set to be 308px wide with 1px border. In IE9, Firefox and Opera everything is the same width but in Chrome (my default browser) the textarea overflows unless the width is set to 304px.
Using Inspect Element I can it reports it as being 314px wide but I'm not too sure why it is doing this. Any info or help will be appreciated, thanks
There is a browser-applied padding: 2px. Apply padding: 0.
.form1 textarea, .form1 input {
padding: 0;
}
This sort of issue can be solved using a CSS reset, btw.
One thing I can see, which I believe is the source of the problem: In textarea, chrome puts a 2px padding for left and right. In input chrome puts 0px padding on left and right.
If you override that it should be fine.
This question already has answers here:
Does element width include padding?
(5 answers)
Closed 7 years ago.
I have div of fixed width containing only input text box and width of that input is set to 100%. I expect it to fill the div but instead it is slightly longer.
Demonstration code:
HTML:
<div class="container">
<input class="content" id="Text1" type="text" />
</div>
CSS:
.container
{
width: 300px;
height: 30px;
border: thin solid red;
}
.content
{
width: 100%;
}
Result (Firefox):
This happens also in IE 8, Chrome, Safari... The overflow width seems to vary in different browsers.
How do I make the content to exactly fill the width of the div?
box-sizing: border-box is a quick, easy way to fix it:
This will work in all modern browsers, and IE8+.
Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
See here for an icky IE7 compatible method.
You need to reset the paddings, margins and the borders. If you want to apply it sitewide, you can use a reset css like Eric Meyer's : http://meyerweb.com/eric/tools/css/reset/
Or you can write your own. Just default it to your own values
Also add a CSS reset to you page. the input may have some padding added!
When I use your code, it shows fine here on Firefox. I suspect you have an issue with specifity: http://htmldog.com/guides/cssadvanced/specificity/
Or, there is a problem with the surrounding html. I.e. unclosed tag.
Try putting that CSS and HTML into a plain file to see if it displays correctly. If it does, I suggest taking a look at the CSS properties of the parent elements.
If you don't have it already, download the Web Developer Toolbar for Firefox, then use CTRL + SHIFT + F to enable the clickable element property display. This will help you debug what is happening.
Hope this helps.