The issue with the page not appearing correctly on IE9 is currently being resolved

I am utilizing bootstrap alongside a bootswatch theme and HTML5 boilerplate to design a webpage. While it appears correctly on Chrome and Firefox, the display is off on IE9 and IE8 mode. However, everything works fine when compatibility mode is enabled in IE9. The issue lies in the fact that the page doesn't align properly in IE9 without compatibility mode and remains stuck to the left side. Any insights into where I might be making a mistake would be greatly appreciated. Thank you in advance!

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/i/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
  <link rel="stylesheet" href="css/bootstrap.css">
  <!-- More ideas for your head here: h5bp.com/d/head-Tips -->

  <!-- For the sticky footer -->
    <!--[if !IE 7]><style type="text/css">#sf-wrapper {display:table;height:100%}</style><![endif]-->
  <style>
      #content-main {
        padding-top:63px;
       }

      #form-language {
        margin-top: 15px;
      }
  </style>
  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="extras/h5bp/js/libs/modernizr-2.5.3.min.js"></script>
</head>

The code can be found here: http://jsfiddle.net/WWphP/

Answer №1

<!--[if !IE 8]><style type="text/css">#main-content {display:flex;height:100%}</style><![endif]-->

The issue lies in the code snippet above. It checks if the browser is not IE8 and then applies the specified styling. The element #main-content is currently set to display: flex; which adjusts its height based on the content inside it, causing some alignment issues. To resolve this, simply modify #main-content to have a fixed height property.

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

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

How to output a string in jQuery if it includes a certain character?

I need to extract all strings that include a specific word within them, like this: <div> <div> <span> <h3>In Paris (Mark Bartels) worked for about 50 years.</h3> </span> </div> ...

Break the line using HTML select option and set it as the value

I am working on a select box where I want to include a value for a line break. <select> <option value=";">Semicolon</option> <option value=",">Comma</option> <option value=".">Dot</option> <opti ...

Angular2 scripts are failing to load in the web browser

Setting up my index page has been more challenging than I anticipated. Take a look at my browser: https://i.stack.imgur.com/L4b6o.png Here is the index page I'm struggling with: https://i.stack.imgur.com/Op6lG.png I am completely stumped this tim ...

Personalizing Material-UI's select component: A step-by-step guide

Desired Outcome: https://i.stack.imgur.com/khNHn.png https://i.stack.imgur.com/dQzVz.png Progress So Far: https://i.stack.imgur.com/CUixn.png Struggling to Position SVG Icon Next to Text: https://i.stack.imgur.com/4GFtA.png Issue with Black Line Whe ...

Adding a stylesheet dynamically in Angular 2: A step-by-step guide

Is there a method to dynamically add a stylesheet URL or <style></style> in Angular2? For instance, if the variable isModalOpened is set to true, I want to apply certain CSS styles to elements outside of my root component, such as the body or ...

Having trouble verifying the selection option in Angular 6

I've been trying to implement Select option validation in Angular 6, but neither Aria-required nor required seem to be effective. The requirement is for it to display a message or show a RED border similar to HTML forms. Here's the HTML snippet ...

Changing the background color of a PHP input based on the webpage being viewed - here's how!

I'm in the process of creating a website where each page will have its own unique background color. Additionally, I am using a PHP input for both the header and footer sections, which need to change their background colors based on the specific webpa ...

Unusual CSS hierarchy observed post AJAX content load

Currently, I am facing a puzzling issue where my CSS rules seem to be losing precedence on a page loaded via AJAX. Despite placing my custom CSS file last in the main page, allowing it to take precedence over any bootstrap styles, after loading new content ...

Is it possible for me to create an immersive HTML5 game that utilizes the entire screen

I'm currently designing an extraordinary HTML5 game. Is there a convenient way to offer the user a handy button for effortlessly switching to full-screen mode? This should work seamlessly across all popular browsers, without any compatibility limitat ...

What is the best way to ensure that the text input in a text area is linked to a particular radio

I have created a form that contains radio buttons. My next goal is to include a text area next to each group of radio buttons. This will allow the user to select an option either by clicking on the radio button or by typing in the corresponding value in t ...

Enabling Video Autoplay in HTML5

When my index.html page starts, it plays a full-screen video. Once the video ends, a button appears on the screen. Clicking the button redirects to another page. However, I am facing an issue with the "autoplay muted" property as it mutes the audio. I wa ...

On-page refresh triggering HTTP 404 error in Vue3 routing situation

Issue Upon reloading a route, such as /installer, in Vue3.js, I encounter the following error: https://i.sstatic.net/UKxdk.png Code Snippet I am utilizing the Router with the setup below: const router = createRouter({ history: createWebHistory(proces ...

I'm struggling to center my navigation bar and adjust its size properly, causing the page to overflow

I am facing some issues with my navigation bar. I am unable to adjust its size or position it at the center of the page. Additionally, despite setting the body width and height to 100vw and 100vh respectively, I am able to scroll both vertically and horizo ...

How to horizontally center a div between two floated elements

Check out this JSFiddle example. I'm facing a challenge in horizontally centering the div class="filter-group" between two floated buttons within the given example. I've tried various methods but haven't been successful so far. Any assistan ...

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

The lightbox feature on the page is not functioning properly

On my website, I have a beautiful lightbox created using fancybox.net. You can check it out here: https://i.sstatic.net/R0OUM.jpg I also use gallery codes to display images in a gallery format. Below is the jQuery code I am using: $(document).ready(fun ...

Creating an HTML form that spans across multiple pages: Tips and tricks

When creating a shopping form that includes items like mugs and tshirts, is it permissible according to website standards to design a form that spans multiple pages? One option could be to add radio buttons for choosing a color directly on the main form ...

Display three images with titles in a row using CSS

I'm trying to align 3 figures with captions horizontally in the middle of the page, side by side, but so far I've only been able to do it vertically. How can I achieve this using just HTML5 and CSS? This is my current HTML: <div class="r ...

Problem with Active State of DOM Element

My goal is to create an effect where clicking on a DOM element, specifically a list, will cause the target list to rotate and remain in that position. Describing it can be a bit challenging, so I have provided a visual example of what I'm working on ...