Please enter the text in the field provided at the bottom using IE10

Why is the text inside my input appearing at the bottom in IE10, while it displays in the middle on FF and Chrome?

http://jsfiddle.net/PXN2e/2/

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 6px 10px;
    width: 150px;
}
button, input, select, textarea {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
}

I require the box-sizing: border-box; style and simply removing it makes the input box too large. Is there another solution to resolve this issue?

htmlcssinput

Answer №1

Take out the line-height property from input.form-text

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    /*line-height: 30px;*/ /* Removed */
    padding: 6px 10px;
    width: 150px;
}

Demo

Answer №2

If you set a line-height, it's best to eliminate any top or bottom padding:

Example: http://jsfiddle.net/abhitalks/PXN2e/7/

CSS:

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px; /* <-- Remove top/bottom padding */
    width: 150px;
}

line-height will align vertically to the specified height. Adding extra padding can disrupt this alignment. Therefore, there is no need for precise calculation of top and bottom paddings for vertical alignment.

Answer №3

Feel free to maintain your line-height, ensuring it aligns with the padding adjustments:

30px - 6px - 6px = 18px

line-height: 18px

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for determining the actions of a node prior to its inception

Is there a way to automatically run scripts on specific elements after their creation? For example, using a jQuery plugin like autoresize to expand the height of a textarea. If I use $('.textarea').autosize(), only the current textareas will be a ...

javascriptjqueryhtmldom

Enhancing the KeyValuePair by incorporating additional value or parameter

I currently have a List<KeyValue<string, int>> that I utilize in the View of one of my applications. While it functions as intended, I am interested in expanding it by potentially incorporating an additional parameter/value to the KeyValue pair ...

c#cssasp.netasp.net-mvcgenerics

How come the arrangement of my columns is incorrect when applying the order class to a column in Bootstrap 5?

Can anyone explain why the last 3 Cards in the ordering are being displayed first on the web page? Once the "order-*" terms are removed, they appear in the correct order. This issue seems to occur when there are more than 5 elements in the row. <!DOC ...

htmlbootstrap-5col

What is the proper way to generate an iframe with a width set to "100%" or left empty, rather than width = "100"?

I am currently utilizing vimeowrap to iterate through a playlist of videos. I would like the iframe that is generated by vimeowrap to have either a width and height set to "100%" or nothing at all. For more information on Vimeo Wrap, visit: To see my tes ...

javascripthtmljsonvimeo

Radio buttons with multiple levels

Looking to implement a unique two-level radio button feature for a specific option only. Currently, I have written a logic that will display additional radio buttons under the 'Spring' option. However, the issue is that when it's selected, t ...

javascripthtmlangulartypescriptangular6

Desktop users can enjoy the off-canvas menu feature, while mobile users will have access to the accordion menu option with Foundation 6

My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices. On desktop, I want the off-canvas menu always visible (see example). For mobile, when the hamburger icon is ...

jquerycsszurb-foundationzurb-foundation-6

Children transform when the parent element is being hovered

I need assistance with changing the child element when the parent is hovered over. I also want to modify an attribute of the parent at the same time. Specifically, I want the background color of #action to change and also adjust the color of the a or h1 el ...

htmlcsssass

What is the method for customizing the hover color in a mantine.ui menu?

I've been attempting to modify the menu color when hovering over it, but unfortunately, it's not working. Could anyone provide guidance on how to change the hover color in mantine.ui menu? ...

cssreactjsmantine

Encountered a problem while attempting to create two separate div elements. The template root is designed to have only one element. This issue

<template> <div class="footerpart-container"> <div class="general-container"> dadada </div> <div class="legal-container"> dadad </div> <div class="helpsupport-container"> dada ...

htmlcssvue.js

Crafting web design with media queries to ensure responsiveness

I have been working on creating a responsive webpage. While the header and footer are resizing properly when the browser is reduced in size, the navigation section is not behaving the same way. Currently, shrinking the page is causing the navigation block ...

htmlcss

Use either Jquery or CSS3 to hide a div if one of its inner divs is empty

I have multiple data sets to display in divs with the same class name. Each div contains two inner divs. <div class="div1"> <div class="div2">Abc</div> <div class="div3"><?php echo $row['SOME VALUE']; ?>< ...

javascriptphpjqueryhtmlcss

Chrome has some issues with resizing the SVG Pattern element

Utilizing inline svgs, I have a svg circle filled with a pattern that should cover 100% of the container size. However, when the parent element is resized via JavaScript, the pattern no longer reflects the 100% width and height as expected. This issue seem ...

javascripthtmlcssgoogle-chromesvg

Leveraging JavaScript for Validating Radio Buttons

I've been following a tutorial guide on this specific website , but I'm encountering some difficulties despite following the exact steps outlined. Can someone provide guidance? Here is what I have done: <html> <script> fu ...

phpjavascripthtml

Implementing append operations in JavaScript without relying on the id attribute

Is there a way to specify the second div without assigning it an ID or using any attributes, and then perform an append operation inside it? For instance, indicating that the p element should be appended within the second div without relying on an ID or ...

javascripthtml

How come my div can alter its own attributes on hover, but its sibling cannot?

As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal ...

htmlcss

Is it possible to retrieve the current CSS value set by a media query using JavaScript?

Currently working on a website project that involves accessing and manipulating the display property of a menu. The goal is to toggle the menu open or closed based on its current state. In my setup, the initial state of the menu is defined as closed using ...

javascriptcssmedia-queries

What are some effective strategies for incorporating multiple Themes into an AngularJS project?

Currently, I am in the process of working on a project that involves utilizing AngularJS, UI Bootstrap, and Sass. The next step is to incorporate different themes that can be selected by the user. While I have successfully implemented the ability to apply ...

javascriptcssangularjstwitter-bootstrapsass

Input the chosen icon list values into a designated box

As a beginner in the world of Javascript, I am venturing into creating a password generator that involves using icons. The concept is simple - by clicking on any number of icons from a list, the corresponding hex code will be displayed in an input box. The ...

javascriptjqueryhtml

Efficiently transferring input to a Typescript file

Is there a better way to capture user input in Angular and pass it to TypeScript? <form > <input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" /> </form> The current method involves creating a ...

htmlangulartypescript

What are your thoughts on combining a JSON object with HTML?

When using ASP.NET MVC, it is possible to return a JSONResult. return JSON(new { View = RenderViewAsString("MyView", model), wasSuccessful = true}) This approach combines HTML and data in a single JSON object. The goal is to utilize strongly typed HtmlHe ...

javascriptasp.nethtmljson