What is preventing the textbox from resizing to the full div in IE? Everything looks good in Chrome

Having trouble with IE Resizing? The following code seems simple but it's causing issues: A div containing a text-box that should take up 100% of the DIV while still showing the red border. Unfortunately, setting height and width to 100% causes the border to disappear :-(

Here is the HTML:

<div>
    <textarea></textarea>
</div>

And here is the CSS:

div{

    width:500px;
    height:500px; 
    border:solid 1px red;
    padding:1px;
    position:absolute;
    top:100px;
}

textarea{
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
}

I'm hoping someone out there has a solution for this issue. The DTD in the example is HTML Strict. Here is the code example link: http://jsfiddle.net/QJYuz/

If you know why this problem occurs, please share any links or insights that could help solve it.

htmlcssinternet-explorer

Answer №1

If you're working with Internet Explorer, keep in mind that setting both left and right (or top and bottom) simultaneously is not supported. Instead, consider adjusting the width and height properties to 100%, but be sure to remove any padding and border styles:

textarea{
   position:absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
}

Answer №2

Consider trying this:

textarea {
    height: 100%;
    width: 100%;
}

This alternative approach may work better as setting the top, bottom, left, and right all at once is not always consistent across different browsers.

Answer №3

For a solution that works seamlessly on both, check out: http://jsfiddle.net/QJYuz/6/

Take a look at my modification to the textarea:

textarea{
    position:absolute;
    top:0px;
    left:0px;
    width: 99%;
    height: 98%;
    overflow: auto;
}

By adjusting the width and height to 99% and 98%, it ensures a clean appearance while maintaining the border. Additionally, including overflow: auto eliminates IE8's unattractive grayed-out scrollbar until necessary.

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

The Angular application is not displaying correctly on mobile devices due to a lack

Having an issue with my angular build. I've deployed my website at this link: It appears fine when viewed on a desktop and even in the devtools. However, when I try to access it on my phone, the layout looks terrible! Any suggestions on how to fix ...

htmlcssjsonangularnpm

Applying CSS to prevent elements from overlapping by adjusting their vertical positioning

I need some help with a CSS formatting question. My current setup works well, the menu's position adjusts based on screen size to be centered both vertically and horizontally. However, I'm facing an issue where elements start overlapping if the v ...

htmlcss

Rotating an object around the camera coordinate using three.js: A step-by-step guide

var newObj = new THREE.CSS3DObject(el); newObj.matrix=camera.matrix.clone(); newObj.matrix.setPosition(new THREE.Vector3(tarX,tarY,tarZ)); //newObj.applyMatrix(new THREE.Matrix4().makeRotationY(rotY)); //newObj.applyMatrix(new THREE.Matrix4().makeRotati ...

javascripthtmlthree.js

Translucent overlay enhancing image contrast

Currently, I have a container with a background image that turns semi-transparent on hover. Below is the simplified version of my HTML: <div class="container"> <div class="overlay"></div> <img src="hi.jpg"> </div> This ...

htmlcss

div consistently positioned above fixed element

My goal is straightforward - I have a fixed div at the bottom of my page that always needs to be visible. Inside this div, there are two sub-divs; one small div should always be on top, and the other should be scrollable. The issue lies with the small div ...

javascripthtmlcss

What is the most effective way to transfer a value from the server to a React user interface and incorporate it into the styling of the user interface?

Currently, I am utilizing Python as the backend for my React frontend. The backend is passing in values such as 17 or 87, and I aim to use these values as a percentage on the scale that I am constructing. Currently, the scale starts in the center: https:/ ...

cssreactjsfrontend

Issue with displaying HTML escaped characters such as "&#39" results in showing a pound sign instead of a single quote

Whenever I store data in my Java code, I employ HtmlUtils.htmlEscape to ensure that HTML characters are escaped. However, when retrieving the data and trying to display it in an HTML format (using AngularJS 1.6), the escaped characters (&rsquo;, &am ...

javahtmlangularjsspring-boot

How to adjust the vertical spacing between divs in a 960 grid using CSS?

I'm currently experimenting with the 960 grid css framework. How can I eliminate the space between two divs stacked on top of each other? [referring to the gap between the blue lines in the image] I created my CSS using the CSS generator found at . ...

htmlcssgrid960.gs

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

I am working on a form that I put together using various pieces of code that I found online. My knowledge of HTML and JavaScript is very basic. The form includes a button that, when clicked, will add another set of the same form fields. Initially, I added ...

javascriptjqueryhtmlvalidationforms

Tips for adjusting row height in a fluid table design using div elements

I'm having trouble making a responsive table (a keyboard) where only the cells are resizing instead of the whole keyboard fitting on the screen without any scrolling required. Here is the code I have so far: https://jsfiddle.net/723ar2f5/2/embedded/r ...

htmlcssresponsive-design

Adjusting the Size and Spacing of Vuetify's Buttons

Why are buttons extending beyond the card width? https://i.stack.imgur.com/wVRoQ.png I'm facing difficulties customizing the buttons within the cards. I want to eliminate all padding so that the black border perfectly encloses the icon without any un ...

cssvuejs2vuetify.js

Highlighting a specific list item dynamically without affecting its nested children

While I have come across similar questions, they don't quite address the specific issue I'm facing. My current project involves creating a keyboard-accessible tree widget. My goal is to apply a background color to the selected list item without ...

jquerycssfocusbackground-colorhtml-lists

Display identical elements from an array and shuffle them every 300 seconds

I created this code snippet that currently displays 5 random rows of data from an array each time it is executed. My goal is to modify the code so that it selects and displays the same 5 random values from the array for a duration of 5 minutes before rand ...

phphtmlarraysrandom

I prefer not to receive the parent's opacity settings when styling a child element in CSS

Is there a way to prevent the child element from inheriting the opacity of the parent in CSS? I have a parent div and a child div inside it. I want to set the opacity for the parent div, but not have it affect the child div. Does anyone know how I can ac ...

css

Issue with ChartJs version 2.8.0: The custom tooltip remains visible even when clicking outside the chart canvas or moving the mouse pointer

I am utilizing ChartJs to display a line chart with a custom tooltip that appears upon the click event of the data points. The challenge I am facing is that the custom tooltip remains visible even when the mouse pointer is outside the chart canvas area. ...

javascripthtmlcsschartschart.js

Using a combination of a bootstrap class and a custom CSS class to enhance your website design

How do I apply two different classes? I have two HTML select fields where the user can choose either repair or another option in the first one. When the user selects one, the second field should appear. But it also needs to have a Bootstrap class: form-con ...

htmlcssbootstrap-4

Printing with CSS across different browsers

It's turning out to be more challenging than I expected. I'm working on a web application that needs to print some pages on A4 paper. These pages are specifically formatted for printing and not for display in the app. This means I don't hav ...

htmlcsstwitter-bootstrap

Is CSS the only way for Python Selenium to locate an element?

My attempt to log in to the Apple website using Selenium has hit a roadblock. When I try to locate the 'sign-in button' using find_element_by_id, an error pops up indicating it's actually a CSS selector. What exactly does that imply? I was ...

pythonhtmlselenium

In search of a mobile web UI framework solely built with CSS styling

Currently in search of a CSS framework that specializes in styling form elements and lists for optimal small screen use. The ideal framework must be CSS only, requiring minimal to no JavaScript. Something along the lines of Twitter Bootstrap would be per ...

htmlcssmobile

Learn how to implement a feature in your chat application that allows users to reply to specific messages, similar to Skype or WhatsApp, using

I am currently working on creating a chatbox for both mobile and desktop websites. However, I have encountered an obstacle in implementing a specific message reply feature similar to Skype and WhatsApp. In this feature, the user can click on the reply butt ...

javascripthtmljquerycsschat