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

Achieving consistent vertical alignment of text in different web browsers

I have thoroughly reviewed the existing links on this topic, but none of them have been useful in my specific case. Most solutions suggest a way to vertically move text so that it appears aligned. However, the issue I am facing is that the text is already ...

Retrieve the webpage content (including any iframes) using a Firefox plugin

Hello there! I am currently working on retrieving data from a webpage that is updated using Javascript. Initially, I attempted to create a Java program to periodically fetch this page from the server, but the information was being updated too slowly. The ...

The scrolling content is positioned beneath the primary header and navigation bar

I'm currently in the process of designing a website where, upon clicking a navigation button, part of the page scrolls while the top header & nav bar remain fixed. Although I've managed to get the scrolling functionality to work and keep the top ...

What is the best way to display two items side by side from a list of items in HTML?

I have a list of items that are displayed in `webView` with 4 elements per row. However, for `mobileView`, I would like to show only 2 elements in each row. Below is an example from my HTML file: <div class="row my-3 cust-heading" style="margin-left: 3 ...

My attempts at locating child elements using XPATH have been unsuccessful in finding an exact match

I have a specific requirement to input a string into the webdriver and then compare it with the label of a radio button. <input type="radio" onclick="Element.show('indicator_radio_term_190');render_selected_term('190','1', ...

The sorting of elements using the jQuery sort() function encounters issues on webkit browsers

Looking for a solution to sort elements by a number? Consider this part of a function that does just that. The number used for sorting is fetched from a data-ranking attribute of the element: $(".tab_entry").sort(function(a,b){ return parseFloat(a.dat ...

What steps can I take to ensure that the full tingle modal, which includes an image, is visible when the

Upon loading the page, I noticed that if the browser width is greater than 540px, the modal displaying an image gets cut off (see figure below). What steps should I take to ensure that the vertical scroll bar appears immediately? https://i.sstatic.net/cJv ...

What are the reasons for the failure of an image upload when checked with PHP's is_uploaded_file function?

My html form allows users to upload images, but I'm encountering an issue where the uploaded image fails the "is_uploaded_file" check for some unknown reason. I'm puzzled as to why the upload is failing the is_uploaded_file check. Any ideas? He ...

Avoid activating the hover effect on an element situated below another element without the use of JavaScript

After reviewing various posts, it seems like the only solution involves using javascript. Is there a way to hover over one element without affecting the style of another element below it, all without relying on javascript? I'm looking for a solution u ...

Learn how to activate a JS native event listener using jQuery for the 'change' event

This question is unique from the one found at How to trigger jQuery change event in code. The focus here is on the interaction of jQuery with native event listeners, rather than jQuery event listeners. I am using addEventListener to bind a change event fo ...

The HTML webpage is optimized for desktop and tablet viewing, but has difficulty displaying correctly on mobile phones

Just starting out with HTML and created a website using HTML and CSS that is now live. It looks good on desktop and tablet (iPad) but not so great on mobile devices. Tried different solutions, including viewport settings, to fix the issue with no success. ...

Focused input filter in a tabular header style

I've been working on customizing the Tabulator header filter to have a more "flattened" style, as requested by my boss. In my CSS, I added the code ...input:focus{border:1px solid #1bb394} to change the input border to 1px green. While this change tak ...

Styles for Tab Alignment

.tabs { position: relative; margin: 20px auto; width: 1500px; } .tabs input { position: absolute; z-index: 1000; width: 120px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filt ...

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

I desire the div to display based on the conditions set in the PHP file

Hi, I am looking to display the div with ID "msga" when a certain condition is met and show the div with ID "msgb" when another condition is met. Here is my PHP code: if(isset($_POST['aa'])) { echo "a"; } if (isset($_POST['bb']))) { ...

Data containing visual content is not being successfully transferred to the MySQL database

I am having an issue where the code is not sending data to the database after clicking on submit. I have also attempted using the POST method with no success. These are the table names in my database: id (AI), image, name, dob, fathername, fatheroccu ...

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

I am experiencing an issue with Safari where there is an unexpected rounded border appearing that

Upon inspecting the image, a slight border is visible behind the main border on Chrome and Firefox. However, Safari and iPhone display a rounded thin border instead. Can you help us understand why this discrepancy is happening and how we can remove it? P ...

Height problem with Semantic UI cards in Chrome on Windows

Encountering an issue specific to Chrome on Windows where the height of my .card elements is not displaying correctly. The height appears to be either too much or too little, causing the problem shown in the screenshot below. This issue seems to be isolate ...

Dart and external CSS and JS libraries and tools

As I prepare to dive into developing my very first web application, one technology that has caught my eye is Google Dart. The idea of using a new, innovative approach to web development excites me, and I am seriously considering utilizing it for my project ...