How come the background image gets replaced by an extensive amount of text?

When using a text-field with a background-image style, the following CSS is applied:

.leftPaneContent INPUT {
    background-color: #FFFFFF;
    background-image: url("../images/icon-search-large.png");
    background-position: 4px 3px;
    background-repeat: no-repeat;
    border: 1px solid #D1D1D1;
    height: 14px;
    margin: 5px 0 5px 3px;
    overflow: hidden;
    padding: 2px 10px 4px 23px;
    width: 85%;
}

In Firefox, the image displays correctly even with a long input value. However, in Internet Explorer, the image gets overwritten with a long input value.

An example of the issue can be seen in the image below in IE:

Is there a solution to this problem?

cssinternet-explorerbackground-image

Answer №1

After attempting to use text-indent to correct the issue in Internet Explorer, I resorted to removing the image from the text field and placing it inside a div element instead.

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

Incorporating stick-to-top scroll functionality using AngularJS and ng

I am trying to implement a 'sticky' scroll on dynamic content. My current working example can be found here. It seems to be working, but I encounter a small 'flicker' when new items are appended. This issue seems to be related to the se ...

javascripthtmlcssangularjs

Learning HTML and CSS integration through Codecademy is a fundamental part of the course

After following the instructions from an old HTML and CSS introduction on , I successfully created my first website. However, the code works perfectly on a special constructor page, but once I try to view it on a browser, the HTML and CSS don't seem t ...

htmlcss

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created: let classList = event.currentTa ...

javascriptcsscss-selectors

The SVG icon displays properly when viewed on a local machine, but is missing when the website is deployed

Something strange is happening with my SVG sprites. Everything seems to be working fine when I test my code locally, but once deployed on Firebase, one of the SVG images fails to appear. What could be causing this issue? Below is the code for two SVGs: sm ...

htmlcssreactjssvg

What is the best way to interact with an element in Python Selenium once it has been located?

I have been working on a script that is supposed to retrieve the attribute of an element and then click on it if the value is true. However, I keep encountering an error in my code. This is the snippet of code I am using: from selenium import webdriver d ...

pythonhtmlcsspython-3.xselenium

Security measures within the browser are blocking access to the same-domain Ajax request made using jQuery, resulting in an "Access is

While attempting to submit a form using jQuery's $.post method, I am encountering the SCRIPT5: Access is denied. error specifically in Internet Explorer. Despite the common belief that this error is linked to cross-domain requests, my own request does ...

jqueryajaxinternet-explorer

adjusting the dimensions of images to ensure uniformity in size

After many attempts, I am still struggling to resize my image. Can anyone offer assistance? I want all images to have the same dimensions. Here is the HTML code: <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='sty ...

htmlcss

``What is the best way to adjust the layout of

I've been using the CSS code below to center items on my page: #MainBox { width: 488px; height: 181px; position: absolute; left: 50%; top: 236px; margin-left: -244px; //this being half the width } However, when viewing the pag ...

iphonehtmlcssresize

Align an image in the center of a div without using absolute positioning

I'm currently facing an issue where I need to align an image at the center of a div without using absolute positioning. This is necessary because the image spills over into any adjacent divs on the page. Specifically, I have a previous div containing ...

htmlcssimage

Problem with CSS animations in IE10

I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in ...

htmlcssanimationfadeinternet-explorer-11

Issue with overflow-auto not displaying scroll bar

In my layout, I have a grid parent with two columns. The left child has a height equal to the parent (100vh), while the right child is 1000px tall, which exceeds the parent's height. Here is the HTML structure: <body> <div class="le ...

htmlcss

Showing the Datepicker from jQuery right in the middle of the screen

Here's the generated code as default: <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper- clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; position: absolute; left: ...

javascriptjquerycss

CSS Problem: The first-child, last-child, and only-child pseudo-classes are not functioning as expected when applied to lists

I am facing an issue with the following pseudo classes: first-child: The first a element within each div should have a red background. last-child: The last a element within each div should have a blue background. only-child: Only the a element of the last ...

htmlcss

Develop a responsive design for a row of icons that automatically flows to a second line when the screen size is

Currently, I am utilizing Bootstrap 4 and attempting to design a row of 12 icons that are responsive. <div class="app-container"> <div class="row"> <div class="col-md-1"> <a class="" href="https://www.xxx.org.au"> < ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Guide on Modifying the CSS File of an Installed Plugin on WordPress

I am looking to customize the design of a WordPress plugin by editing its CSS file. When trying to locate the CSS file of the installed plugin through Plugins --> Installed Plugin --> Editor, I could only find .php files instead of the desired CSS f ...

phphtmlcsswordpress

Changing a p element to a div and adding a class in Bootstrap 4.5

To maintain consistency, I prefer using <div class='something'>BIO</div> over <p>BIO</p>. In Bootstrap 4.5, is there a similar class that achieves the same result? I'm not very skilled in CSS, so please forgive me i ...

csstwitter-bootstrapbootstrap-4

Button with improperly aligned text

I'm having an issue with two buttons where the text on one button is not centered. .mail_download_csv_btn{ width: 100px !important; font-size: 12px !important; } .margin_right_10{ margin-right:10px; } <link rel="stylesheet" href="https: ...

htmlcsstwitter-bootstrap

Animate the appearance of list items sequentially using CSS animations

Is there a simpler way to achieve the effect of having list items slide in one after the other? The CSS method provided here seems quite intricate. #nav ul.is-visible{visibility:visible;opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transfo ...

jquerycss

Struggle with the accordion collapse animation in Bootstrap4?

My implementation of accordion collapse in Bootstrap 4 is functional, but lacks smoothness. Can anyone offer suggestions on how to improve this? I have attempted to nest divs inside each other, but it has not yielded the desired outcome. Below is the code ...

htmlcssbootstrap-4

Reduce multiple paragraphs in PHP to a more concise form

Is there a way to trim paragraph content to 100 characters, especially when dealing with multiple paragraphs? For example, consider the following HTML snippet: <div class="div-1"> <div class="section-1"> <p>"Lorem ipsum ...

phphtmlcss