"Troubleshooting problem with padding-right in Internet Explorer when displaying background image within

Encountering a problem with the IE browser (all versions up to IE 10). Here's the issue.

The text in the input box is overlapping its background image. Unable to place this image in the parent div due to the dynamic nature of the input box and other functionalities. Also, unable to increase the width of the textbox beyond 100px as the value contains about 50 characters.

Please assist with a solution.

CSS

.some {
background:url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png) no-repeat right center;
padding:1px 15px 1px 1px;
border:1px solid #ccc;
width:100px;
color:red;
overflow:hidden;}

HTML

<input type="text" class="some" value="I am a messy input box" />
htmlcssinternet-explorerinput

Answer №1

Experience this IE8 demonstration here: http://jsfiddle.net/74u4w/2/

If successful, simply include the border on the image for a solution

.some {
    background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
    background-position: 105px -6px;
    background-repeat: no-repeat;
    padding: 1px;
    border: 1px solid #ccc;
    border-right: 25px solid transparent;
    width: 100px;
    color: red;
    overflow: hidden;
}

If not, consider using a small javascript function to append an img/div after your input (can be added dynamically)

An example of how it could appear with absolute positioning is shown in this css snippet:

.some {
    padding: 1px;
    border: 1px solid #ccc;
    width: 80px; /* adjusted for img */
    color: red;
    overflow: hidden;
}
.someimg {
    background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    overflow: hidden;
    left: ?px; /* calculation based on input */
    top: ?px; /* calculation based on input */
    width: 20px;
    height: 20px;
}

Answer №2

Reduce the size of the input box and apply padding to the right side

Check out the live demo on FIDDLE

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

What methods can be used to ensure a div reaches all the way down to a sticky footer?

I'm currently working on a layout with a sticky footer, and I have a specific div that needs to extend all the way down to the footer. However, simply setting the height to 100% doesn't achieve the desired result. I've also experimented with ...

htmlcsssticky-footer

Tips for lining up segmented pictures in HTML?

Recently, I was presented with a set of sliced images to insert into an HTML document. These images were not sliced by me, but rather provided as individual pieces. To showcase these images in a grid-like manner, I opted to construct a table layout. Each r ...

htmlcssimageborder

The MUI makeStyles() class has been implemented, yet the styles are not being displayed when using classList.add('class-name')

Currently, I am utilizing MUI makeStyles() to create a series of CSS classes. Within these classes, I am dynamically including and excluding one specific class to my Box element during file drag-and-drop events. The class is successfully added, as I can o ...

javascriptcssreactjsfile-uploadmaterial-ui

What could be causing certain items in my Bootstrap navbar to be hidden on mobile screens?

When I view my website on mobile devices, only the logo appears in the navbar, not the other elements. Can you help me troubleshoot this issue? NavBar HTML Code: .navbar-logo { width: 93.75px; height: 23.5px; margin-left: 10rem; } .navba ...

htmlcsstwitter-bootstrapbootstrap-5

Maintain a consistent header height with CSS even when using the calc() function

--dis: calc(var(--max-height) - var(--min-height)); /* @media large{--min-height:13rem}; @media small{--min-height:6.5rem}; --max-height:75vh; */ --percent: calc(var(--scroll-ani) / var(--dis)); /* in js: document.body.style = "--scroll-ani: ...

javascripthtmlcss

Use Angular to change the style of multiple element groups at the same time when hovering

When hovering over an element with a common attribute, such as a class name, I want to change the style of all elements that share that attribute. Achieving this effect is simple with jQuery: $(function() { $('.bookId4').hover( function(){ ...

javascriptcssangularjshover

What is the best way to activate a CSS animation?

I've hit a roadblock while attempting to trigger a CSS animation. Here's my CSS: h3[id="balance-desktop"]{ color: black; -webkit-animation-name: gogreen; -webkit-animation-duration: 2s; animation-name: gogreen; animation-du ...

javascripthtmlcss

A useful Javascript function to wrap a string in <mark> tags within an HTML document

I have a paragraph that I can edit. I need to highlight certain words in this paragraph based on the JSON response I get from another page. Here's an example of the response: HTML: <p id="area" contenteditable> </p> <button class="bt ...

javascriptjqueryhtmljson

Double f span causing unusual behavior in Chrome browser

Why does the highlight focus on "ort" instead of "fort"? It appears this occurs when there are two f's. When I substitute f with other letters, like d, it shows correctly. Could this be a bug in Chrome? Chrome version is chrome83. add: It seems to be ...

htmlcss

Trigger a click event on a dynamically loaded button

Here's a unique twist to the usual discussions on this topic. I have a dynamically loaded button in my HTML, and I've saved the selector for it. Later on in my code, I need to trigger a click event on this button programmatically. The typical $(& ...

javascriptjqueryhtmldom

Explore the capabilities of the Angular Ng2SearchPipeModule to enhance your search input

I used the ng2SearchPipeModule for an input search, but it's not working. I can't seem to find my error. In my HTML, all my books are within divs. Will typing a book title display all the divs? Of course, I have imported in app.module.ts Ng2Sear ...

angulartypescriptapiinput

Strange Appearance of Angular Material Slider

I am experiencing some issues with my slider and I'm not exactly sure what's causing them. [] .big-container { display: block; padding-left: 10px; padding-right: 10px; padding-top: 10px; margin-bottom: 10px; } .question { display ...

htmlcssangularangular-materialslider

Mobile Exclusive Bootstrap 5 Collapse Feature

Trying to implement the default collapse feature in Bootstrap 5x specifically for mobile devices. Despite setting up a CSS media query as per my research, the .collapse function doesn't seem to work as intended? The goal is to have the collapsed DIV ...

csstwitter-bootstrapbootstrap-5

Adjust the angle and trim an image on one side

Can someone assist with making an image appear like this: I'm attempting to achieve this look using CSS: I've experimented with skewing but the red area persists, regardless of the degree value used. Here is my basic structure: <div class= ...

htmlcsstransform

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

javascripthtmlfullscreen

What is the best way to ensure an input field and a button are aligned perfectly within the same div tag and of equal height?

During a recent HTML-CSS project, I encountered an issue where I struggled to ensure that two elements within a div tag were the same height. The elements in question were an input field and a button with an icon. Here is a snippet of the relevant HTML cod ...

htmlcssfrontend

Verify the accurate sequence for arranging the items in the drag and drop list

I am currently developing a Language learning platform that includes several web applications. I am still new to javascript and struggling to find a solution for one of my apps. This specific app involves draggable list items that need to be arranged in t ...

javascriptjqueryhtmldrag-and-dropjquery-ui-draggable

developing a fresh node within the jstree framework

Recently, I have been working on creating a node using crrm as shown below $("#TreeDiv").jstree("create", $("#somenode"), "inside", { "data":"new_node" }); This specific function is triggered by a wizard, enabling me to seamlessly create a new node withi ...

javascriptjqueryhtmlcssjstree

What methods can I use to maintain alignment across different screen sizes?

html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } .container { position: absolute; width: 100%; height: 100%; ...

htmlcss

Issue with displaying spinner in bootstrap version 4.0.0

I am having trouble implementing a spinner on my website. I have followed the code below but still can't see the spinner showing up. Can someone please help me troubleshoot this? <!-- Bootstrap CSS --> <link rel="stylesheet" href= ...

htmlbootstrap-4