The accuracy of IE9 <section> is not quite up to par

When viewing This Page in IE9, the element section#tcs-website-content appears as 990px wide even though its CSS property is set to width: 100%. This occurs despite all parent elements also having a width of 100%, resulting in a browser width of 1024px.

As someone unfamiliar with IE9, I am unsure of what specific issue to address in this situation.

Below is the CSS (LESS) for the relevant elements:

html, body {
    margin: 0;
    padding: 0;
    max-height: 100%;
    min-height: 100%;
    height: 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    position: relative;
    background: none;
    font-family: 'muliregular','oswaldregular',Arial;
}

#viewport {
    display: none;
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background: none;
}

#tcs-website-content {
    position: absolute;
    z-index: 100;
    top: 120px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    #bundle .box-sizing();

    & .inner-content {
        width: 960px;
        margin: 0 auto;
    }
}

Answer №1

To ensure that it spans the entire width, my suggestion would be to include this specific instruction within the #tcs-website-content definition:

right: 0;

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

Discover the secret to extracting a unique style from inspect mode and incorporating it into your CSS design

I'm currently working on my angular project and I've imported the ngx-editor. My goal is to reduce the height of the editor, but I'm facing some challenges. After inspecting the element, I was able to adjust the height successfully within th ...

Using jQuery AJAX to preload GIF images for CSS background-image loading

For some time, I have been utilizing jQuery AJAX to preload GIF images with the following code: $("#images").html("<img id='loader' src='../img/ajax-loader.gif' />"); Now, I am attempting to achieve a similar effect (such as a s ...

Effect on Label in WordPress Contact Form 7 When Input Field is Populated

Currently, I am attempting to achieve the floating label effect on Contact Form 7 and have encountered an issue. Although I have successfully implemented the label effect on input:focus, I am struggling to make it persist once text has been entered and foc ...

What is the best way to utilize an onClick on a button to update a value that is being utilized in a useEffect hook?

I am looking for a way to dynamically change the content displayed in this section without navigating to another page. I have two sets of data - one displaying all blogs and the other showing only blogs authored by "mario". How can I implement a button cli ...

Easily toggle between various image source paths

In my current application, all HTML files have hardcoded relative image paths that point to a specific directory. For example: <img src="projectA/style/images/Preferences.png"/> Now, I am considering switching between two different project modes: & ...

One interesting characteristic of Javascript localStorage is that it overrides existing data instead of adding to it

I've been experimenting with localStorage to create new divs dynamically. Everything is going well, but I encountered an issue after reloading the page and clicking the bag button again. The previously created divs are being replaced by the new ones i ...

How to make a Material UI Dialog Box automatically expand to fit the Dialog Content Area

In my project, I am working on a Dialog component which has a maximum width and a minimum height. Inside the DialogContent, I want to have a Box element that stretches to fill out the remaining space of the DialogContent. The goal is to have a background i ...

Tips for Printing a div Element with Horizontal Scrollbars

My webpage has both vertical and horizontal scroll bars, but when I use window.print(), it only prints the visible content in the window. Is there a way to print the entire scrollable content within the window? ...

Is there a way to update the input box value with a variable using jquery?

I am currently facing an issue with changing the value attribute of an input box in a form using jquery. Although I am able to change the value, it does not reflect in the outer html. Below is my current code snippet: $("a").click(function(event) { va ...

The backface remains visible despite being designated as "hidden"

I have successfully created a "flip card" in CSS3, where the card flips downward to reveal the other side when a user hovers over it. I have ensured that the back face is not visible by setting backface-visibility to hidden. However, despite my efforts, th ...

Using jQuery to dynamically change the CSS color based on the background-color of a checkbox label

When a checkbox is selected, the function below runs to change the text color to white or black based on the darkness of the background color. However, the third checkbox should trigger this change to white but currently does not. function isDark(color) { ...

What is the best way to incorporate autoplay video within the viewport?

My objective is for the video to automatically start playing when it enters the viewport, even if the play button is not clicked. It should also pause automatically when it leaves the viewport, without the need to click the pause button. <script src=& ...

Is there a way I can ensure the values are loaded when the page loads, rather than displaying NaN?

I've recently created a car rental calculator for a client, and it's almost complete. Everything is working smoothly, from the calculations to the conditions. However, I'm facing an issue where the price isn't calculated on page load. I ...

Techniques for incorporating a variable into the value field in JavaScript

let y = data[1]; cell1.innerHTML ='<input id="text" type="text" value= "'y'"/>' ; This snippet of code does not render any content when attempting to pass the variable, but if you provide a specific value like "h", it will displa ...

When switching between classes, it is not possible to apply a different value to the same CSS property

I am currently working on a project that involves toggling a class on a ul tag with an id of sideNav using JavaScript. In this scenario, I have set the left attribute of the id to 0, while the same attribute in the class has a value of -100%. After sever ...

Error message in JS and HTML is totally bizarre

My expertise in JavaScript is very limited, so the terms I use might not be entirely accurate. However, I'll do my best to explain the issue at hand. I'm facing a peculiar problem... I've been attempting to modify someone else's JS scr ...

Is it possible to trigger the @click event in Vuejs when utilizing v-html to render HTML content?

Here is an interesting HTML scenario: errorText: '<a class="button" @click.prevent="enableExceedable(issue.mapping)">Enable exceedable limits</a>'; I am trying to insert this string into the following div: <div v-if="hasIssue != ...

Choose an element by its specific data attribute

I have come across this html code and I am attempting to assign a new class to it using the data attribute: <p class="form-row form-row-wide" data-child-field="child_has_jacket"> </p> Even after trying with jQuery : jQuery( ...

Having trouble with animating the background color of an input button using jQuery?

I'm completely confused as to why the background color isn't changing despite investing a significant amount of time into it: <input type="button" class="front-consultation-btn" value="Get A Free Consultation"> <script> $(' ...

Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right. <div class="row"> <div class="col s6"> <div class="panel"> content1 </div> <div class="panel"> ...