Troubleshooting: Layout display issue on Internet Explorer 8

The first image is from IE9 and above, while the second one is from IE8. In IE8, the right side goes down because it's displaying in mobile view (Check the top menu)

Here is the header code I am using:

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

And this is how I am structuring my layout:

      <div class="container">
          <div class="col-md-9 col-sm-8">LEFT</div>
          <div class="col-md-3 col-sm-4">RIGHT</div>
      </div>

Answer №1

To address compatibility with IE8, make sure to integrate https://github.com/scottjehl/Respond into your project.

After downloading and adding it to your codebase, the problem should be resolved.

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

Challenges with Hover Dropdowns in Bootstrap Navigation Menu

Check out this screenshot of a navbar PSD design I'm aiming for: To make my navbar dropdown show up upon hovering, I've implemented the following JavaScript: $('.navbar .dropdown').hover(function() { $(this).find('.dropdown-men ...

Tips for using a button to update data without triggering a postback

Within the GridView in my ASP.net project, I have an ASP.net button with the following code: <asp:Button UseSubmitBehavior="false" runat="server" ID="btnShow" CssClass="btnSearch" Text="View All" CommandName="ViewAll" OnCommand="btnShow_Command" Comman ...

jquery target descendants with specific names

In the provided HTML code snippet, there is a main div with the class name of cxfeeditem feeditem, and it contains multiple child elements with similar class names and structure. My query pertains to extracting values from specific children within all the ...

As you scroll, this smooth marquee effect gently shimmers with each movement

I've been trying out this code to create a scrolling marquee text, but the issue is that after 7000 milliseconds it starts to jitter, which doesn't make the text look good. Any suggestions on how I can fix this problem? Let me know! <script ...

Using CSS to create a transition effect for fading in and out background images

I created a website with a captivating full-page background image (img/bg_start.jpg): If you hover your mouse over the central animal on the page, the current image (img/bg_start.jpg) will fade out and be replaced with another picture (img/bg_start2.jpg) ...

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

There are 12 image icons displayed in a row within div elements using display: inline-block. However, when the browser window is resized, I would like the icons to be arranged on two or more rows so that each row contains an equal number of icons. ...

What is the best way to remove the empty space on the right side of a webpage while ensuring it remains responsive?

I noticed that there seems to be some extra space on the right side of the layout. I'm not sure how to adjust the Bootstrap code or CSS to fix this issue, or if I need to apply margin 0 or padding 0 somewhere in the code. * { box-sizing: border-b ...

Interactive text animation triggered by a click

jQuery ( function ( $ ) { console.log(">>Testing animation"); $('a.loveit').on('click',function(event){ event.preventDefault(); var text = $(this).find('div.love-text'); ...

Randomizing jQuery for duplicated HTML/jQuery elements

I'm facing a challenge with my jQuery and HTML scripts. I have a dropdown menu where a randomly generated number is displayed in the supplies field (voorraad) based on the selected option. However, when I clone this field using the add button, the fun ...

Tips for displaying a PNG image correctly within the navbar

I'm facing an issue with adding a logo to the navigation bar, as the logo I want to use doesn't display correctly. Even after trying to adjust the width and height, it continues to stretch inappropriately and the text on the image remains unread ...

Can a submit button be created that integrates both a radio button and submission functionality?

Is there a way to combine a radio button and submit button into one element for submitting the value just with a click? Currently, I have a radio button and a separate submit button in my code, but I want to streamline it. This is the current code snippet ...

Retrieve the window.selection() range of a content-editable paragraph, taking into consideration any spans within the paragraph's length

When I click on the plain paragraph text, everything seems to work fine. I can determine the start and end of the selected range without any issues. However, when there is a span element with some styling inside the paragraph text, the end of the range is ...

Display a modal pop-up containing HTML content

I recently started building a small website using Zurb Foundation. I have created a basic grid layout with large metro style div thumbnails (about 10 on the page). Now, I want to enhance user interaction by implementing modal windows that appear when a th ...

Display a petite popup above the selected text within the Code Mirror editor

I have been utilizing the following code snippet to highlight text segments in Codemirror, a renowned code editor and syntax highlighter that can be downloaded from this link. Despite referring to the documentation, I am still unable to grasp how this fun ...

Creating a see-through effect for dijit.Dialog as it appears

Utilizing the dijit.Dialog library, I have implemented a Dojo Dialog box that appears on a Rowclick event of a Dojo grid. I am looking to make the Dialog box transparent or reduce its opacity so that the background is visible and it looks visually appealin ...

Is there a way to render an image onto a canvas using an input tag?

Looking to create an image preview using canvas? Upload the image with the input tag and watch it display on canvas. I've experimented with various methods such as using img tags, setting img src for canvas using img tags, and trying onclick function ...

Allow frontend JavaScript to retrieve a text file that is restricted to individual users

Trying to articulate my goal is challenging, but I'll do my best to clarify. My objective is to enable JavaScript (or an alternative solution) to retrieve data from a text file on a static site and utilize that data in some way. The challenge here is ...

Webpack fails to handle CSS background images

I'm having trouble with my Webpack configuration as it's not processing CSS images set in the background property: background: url('./hero.jpg') no-repeat right; This is resulting in an error message that reads: ERROR in ./src/app/comp ...

Using Jquery to enhance navigation tabs with pointers

I am facing an issue where the class .hover and .over are added to the entire list whenever I mouseover any list item. I understand that this is happening due to my jQuery code, but I would like to find a way for jQuery to only add the class to the specifi ...

The CSS media query isn't working as expected

Having some trouble with media queries on a physician website I'm developing. I've tried multiple times but can't seem to figure out why they aren't working. If anyone could take a look and offer some guidance, that would be much apprec ...